Question

如果选择checkbox1或checkbox1 & checkbox2显示List1

如果选择checkbox2，请显示List2

如果未选择checkbox1 & checkbox2，则隐藏List1和＆amp;列表2

以下JSFiddle并不安静，按照我的意愿行事。

代码：

$(document).ready(function() {
        var $cBoxes = $('#checkbox1, #checkbox2');
        $cBoxes.change(function(){
          if (($cBoxes.length == $cBoxes.filter(':checked').length)){
            $('#list1').show();
            $('#list2').hide();
          }else{
            $('#list1').hide();
            $('#list2').show();
          }
        });
});

Answer 1

我认为这就是你想要的？

$(document).ready(function() {
    var $cBoxes = $('#data-type-surver-cert, #data-type-assessments');
    $cBoxes.change(function(){            
        if($('#data-type-surver-cert').is(':checked'))
        {
            $('.suvery-cert-list').show();
            $('.assessment-list').hide();
        }
        else if($('#data-type-assessments').is(':checked'))
        {
            $('.suvery-cert-list').hide();
            $('.assessment-list').show();
        }
        else 
        {
            $('.suvery-cert-list').hide();
            $('.assessment-list').hide();
        }
    });
});

小提琴：http://jsfiddle.net/tfwngc8j/

Answer 2

似乎逻辑很简单，可以使用切换。

$('#checkbox1, #checkbox2').on("change", function() {
    var cb1 = $('#checkbox1')[0].checked;  // or .is(":checked")
    var cb2 = $('#checkbox2')[0].checked;  // or .is(":checked")
    $('#list1').toggle(cb1);
    $('#list2').toggle(!cb1 && cb2);
}).trigger("change");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" id="checkbox1"/><label for="checkbox1">One</label>
<input type="checkbox" id="checkbox2"/><label for="checkbox2">Two</label>

<ul  id="list1">
  <li>List one</li>
</ul>

<ul  id="list2">
  <li>List two</li>
</ul>

Answer 3

This看起来像你在找什么

$(document).ready(function() {
        var $cBoxes = $('#data-type-surver-cert, #data-type-assessments');
        $cBoxes.change(function(){
            if ($cBoxes.first().is(":checked")){
            $('.suvery-cert-list').show();
            $('.assessment-list').hide();
          }else if($cBoxes.last().is(":checked")){
            $('.suvery-cert-list').hide();
            $('.assessment-list').show();
          }else
              $('.suvery-cert-list,.assessment-list').hide();
        });
});

Answer 4

这似乎有效：

$('#data-type-surver-cert, #data-type-assessments').change(function () {
    $('.suvery-cert-list, .assessment-list').hide()
    if ($('#data-type-surver-cert').is(':checked') || ($('#data-type-surver-cert').is(':checked') && $('#data-type-assessments').is(':checked'))) $('.suvery-cert-list').show()
    if (!$('#data-type-surver-cert').is(':checked') && $('#data-type-assessments').is(':checked')) $('.assessment-list').show()
})

<强> jsFiddle example

Answer 5

$(function () {
    var $cBoxes = $('#data-type-surver-cert, #data-type-assessments');
    $cBoxes.change(function () {
        var cBoxChecked = $(':checked').length;
        if ((cBoxChecked == 2)) {
            $('.suvery-cert-list').show();
            $('.assessment-list').hide();
        } else {
            $('.suvery-cert-list').hide();
            $('.assessment-list').show();
        }
    });
});

复选框选择组合

5 个答案: