0
    <div class="radio">
        <label><input type="radio" name="share--audio--top" value="1" checked> На своей стене</label><br>
        <label><input type="radio" name="share--audio--top" value="2"> В личном сообщении</label>
    </div>
    <div data-share--audio--top="1" style="display:none">
      На своей стене
    </div>
    <div data-share--audio--top="2" style="display:none">
      В личном сообщении
    </div>

Как изменить свойство CSS display:none у data-share--audio--top на display:block на основе выбранной кнопки?

0

2 ответа 2

3

$('input[name="share--audio--top"]').on('change', function() {
  var v = this.getAttribute('value');
  $('div[data-share--audio--top]').each(function() {
    this.style.display=this.getAttribute('data-share--audio--top') === v?'block':'none';
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio">
    <label><input type="radio" name="share--audio--top" value="1" checked> На своей стене</label><br>
    <label><input type="radio" name="share--audio--top" value="2"> В личном сообщении</label>
</div>
<div data-share--audio--top="1" style="display:none">
  На своей стене
</div>
<div data-share--audio--top="2" style="display:none">
  В личном сообщении
</div>

PS: если чутка изменить верстку можно обойтись без js/jquery

div[data-share--audio--top] {
  display: none;
}

input[name="share--audio--top"][value="1"]:checked ~ div[data-share--audio--top="1"],
input[name="share--audio--top"][value="2"]:checked ~ div[data-share--audio--top="2"] {
  display: block;
}
<input id="ch1" type="radio" name="share--audio--top" value="1" checked>
<label for="ch1"> На своей стене</label><br>
<input id="ch2" type="radio" name="share--audio--top" value="2">
<label for="ch2"> В личном сообщении</label><br>
<div data-share--audio--top="1">
  На своей стене
</div>
<div data-share--audio--top="2">
  В личном сообщении
</div>

2

Если конкретно этот код (и всего 2 элемента списка), то можно сделать вот так:

$(document).on('click', '.radio input[type="radio"]', function() {
  var val = $(this).val();
  switch (val) {
    case '1':
      $('div[data-share--audio--top="2"]').hide();
      $('div[data-share--audio--top="1"]').show();
      /* либо меняем значения свойства display
      $('div[data-share--audio--top="2"]').css('display', 'none');
      $('div[data-share--audio--top="1"]').css('display', 'block');
      */
      break;
    case '2':
      $('div[data-share--audio--top="1"]').hide();
      $('div[data-share--audio--top="2"]').show();
      /*
      $('div[data-share--audio--top="1"]').css({'display' : 'none'});
      $('div[data-share--audio--top="2"]').css({'display' : 'block'});
      */
      break;
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="radio">
  <label><input type="radio" name="share--audio--top" value="1" checked> На своей стене</label><br>
  <label><input type="radio" name="share--audio--top" value="2"> В личном сообщении</label>
</div>
<div data-share--audio--top="1" style="display:none">
  На своей стене
</div>
<div data-share--audio--top="2" style="display:none">
  В личном сообщении
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.