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

jQuery显示不只对具有特定类的元素起作用

3 个答案: