Jquery 显示不适用于具有特定 class 的元素

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>

页面加载后所有元素都设置为隐藏。

基本上只显示了一些带有 class1 的元素，但大多数元素保持隐藏状态，而且这似乎只发生在带有 class.

的元素上

还有一些元素可能有两个 class，例如：

class="class1 class2"

Answer 1

希望对你有帮助

 <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>

Answer 2

Solution :

You need to use checkbox change event

use $(this).prop('checked') to find checkbox is checked or not

$(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 3

将您的事件更改为如下所示，您不需要文档更改事件中的每个函数。

 $(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;
            }
        }
    });

Jquery 显示不适用于具有特定 class 的元素

Jquery show not working only on elements with a certain class

jquery

show