Jquery show не работает только для элементов с определенным классом

Question

У меня странная проблема, когда jquery .show () не работает только с некоторыми элементами.

У меня есть эти флажки:

<input type="checkbox" class="classcheck" value="1" id="id1">
<input type="checkbox" class="classcheck" value="2" id="id2">

Используются для отображения различных элементов в зависимости от того, что я выбрал.

Вот код, который делает это:

$(document).on('change','.classcheck',function()
{
    $('.classcheck').each(function() {
        if($(this).is(':checked'))
        {

            switch($(this).val())
            {
                case '1':
                    $('.class1').show();
                break;

                case '2':
                    $('.class2').show();
                break;
            }
        }
        else
        {
            switch($(this).val())
            {
                case '1':
                    $('.class1').hide();
                break;

                case '2':
                    $('.class2').hide();
                break;
            }
        }

    });
});

И пример элемента:

    <div class="item form-group class1">
          <label class="control-label col-md-4 col-sm-4 col-xs-12">This is an 
element: </label>
      <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="text" id="el1" name="el1" class="form-control col-md-7 col-xs-12" style="width:40%" >
      </div>
    </div>

Все элементы, как только загрузка страниц становится скрытой.

В основном показаны только некоторые элементы с классом 1, но большинство из них скрыты, и, похоже, это происходит только с элементами этого класса.

Также некоторые элементы могут иметь два класса, например:

class="class1 class2"

Answer 1

Решение:

• Вам необходимо использовать событие смены флажка
• используйте $(this).prop('checked'), чтобы найти флажок установлен или нет

$(document).ready(function(){

    $('.classcheck').each(function () {
        $(this).change(function () {
            if ($(this).prop('checked')) {
                switch ($(this).val()) {
                    case '1':
                        $('.class1').show();
                        break;
                    case '2':
                        $('.class2').show();
                        break;
                }
            }
            else {
                switch ($(this).val()) {
                    case '1':
                        $('.class1').hide();
                        break;

                    case '2':
                        $('.class2').hide();
                        break;
                }
            }
        });//end change event

    });//end each loop

});//jq

.class1,.class2{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" class="classcheck" value="1" id="id1"> Checkebox 1

<input type="checkbox" class="classcheck" value="2" id="id2">  Checkebox 2

<div class="item form-group class1">
    <label class="control-label col-md-4 col-sm-4 col-xs-12">
        This is an element 1 :
    </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="text" id="el1" name="el1" class="form-control col-md-7 col-xs-12" style="width:40%">
    </div>
</div>


<div class="item form-group class2">
    <label class="control-label col-md-4 col-sm-4 col-xs-12">
        This is an element 2 : 
    </label>
    <div class="col-md-6 col-sm-6 col-xs-12">
        <input type="text" id="el1" name="el1" class="form-control col-md-7 col-xs-12" style="width:40%">
    </div>
</div>

Answer 2

Измените ваше событие на что-то вроде ниже, вам не нужна каждая функция внутри события изменения документа.

 $(document).on('change', '.classcheck', function (ev) {
        var clickedBox = ev.currentTarget;
        if ($(clickedBox).is(':checked')) {
            switch ($(clickedBox).val()) {
                case '1':
                    $('.class1').show();
                    break;

                case '2':
                    $('.class2').show();
                    break;
            }
        }
        else {
            switch ($(clickedBox).val()) {
                case '1':
                    $('.class1').hide();
                    break;

                case '2':
                    $('.class2').hide();
                    break;
            }
        }
    });

Answer 3

Надеюсь, вам поможет

 <script>
    $('.classcheck').on('click', function() {
        $('.classcheck').each(function() {
            if($(this).is(':checked'))
            {

                switch($(this).val())
                {
                    case '1':
                        $('.class1').show();
                    break;

                    case '2':
                        $('.class2').show();
                    break;
                }
            }
            else
            {
                switch($(this).val())
                {
                    case '1':
                        $('.class1').hide();
                    break;

                    case '2':
                        $('.class2').hide();
                    break;
                }
            }

        });   
    })

</script>