jQuery - скрывать / показывать div, когда флажки установлены - PullRequest
Новая
       19

jQuery - скрывать / показывать div, когда флажки установлены

0 голосов
/ 13 мая 2018

У меня есть функция jquery, позволяющая показывать или скрывать div, когда некоторые чекбоксы установлены или сняты и работают нормально, используя функцию «change». Поэтому, если флажок уже был предварительно установлен, соответствующий div не отображается. Как я могу изменить этот код для работы?

Мой код здесь: 

<script>
    jQuery(document).ready(function($) {

        $('.my_features').change(function() {
            var checkbox = $(this);                 
            if( checkbox.is(':checked') ) {                       
                $( '#' + checkbox.attr('data-name') ).show();
            } else {                      
                $( '#' + checkbox.attr('data-name') ).hide();
            }
        });
    });
</script>

Ответы [ 4 ]

0 голосов
/ 13 мая 2018

Это довольно канонично: 

$(function() {
  $('.my_features').on("change",function() { 
    $('#'+$(this).attr('data-name')).toggle(this.checked); // toggle instead
  }).change(); // trigger the change
});
.toggleDiv { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label><input type="checkbox" class="my_features" data-name="div1">Div 1</label>
<label><input type="checkbox" checked class="my_features" data-name="div2">Div 2</label>
<div id="div1" class="toggleDiv">Div1 div</div>
<div id="div2" class="toggleDiv">Div2 div</div>
0 голосов
/ 13 мая 2018

Попробуйте так. 

<script>
jQuery(document).ready(function($) {

    $('.my_features').each(function() {

        $(this).change(function() {

        var checkbox =  $(this);         
        if( checkbox.is(':checked') ) {                       
            $( '#' + checkbox.attr('data-name') ).show();
        } else {                      
            $( '#' + checkbox.attr('data-name') ).hide();
        }
    });
    });
});

0 голосов
/ 13 мая 2018

Вы можете использовать следующее, чтобы получить данные, а затем показать или скрыть div на основе значения флажка 

$(document).ready(function() {

  $('.my_features').on('click', function() {
    var checkbox = $(this);
    var div = checkbox.data('name');

    if (checkbox.is(':checked')) {
      $('#' + div).show();
    } else {
      $('#' + div).hide();
    }
  });

})

Вы можете увидеть рабочий fiddle

0 голосов
/ 13 мая 2018

Я предполагаю, что ваш вопрос заключался в том, как показать / скрыть элементы div для флажков, которые уже отмечены / сняты при загрузке страницы.

Это можно сделать, передав ту же функцию, которую вы используете для change(), в метод each(), который будет перебирать каждый флажок и запускать функцию. 

jQuery(document).ready(function($) {
  $('.my_features').each(function(){
    var checkbox = $(this);
    //you can use data() method to get data-* attributes
    var name = checkbox.data('name');
    if( checkbox.is(':checked') ) {                       
      $( '#' + name ).show();
    } else {                      
      $( '#' + name ).hide();
    }          
  });
});

Демо 

function update(){
  var checkbox = $(this);
  var name = checkbox.data('name');
  if( checkbox.is(':checked') ) {   
    $( '#' + name ).show();
  } else {                      
    $( '#' + name ).hide();
  }          
}

//just setup change and each to use the same function
$('.my_features').change(update).each(update);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <input class="my_features" type="checkbox" data-name="first" />
  <input class="my_features" type="checkbox" data-name="second" checked />
  <input class="my_features" type="checkbox" data-name="third" checked />
  <input class="my_features" type="checkbox" data-name="fourth" />
</div>

<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
<div id="fourth">Fourth</div>
...