复选框选择组合

Checkboxes selection combination

本文关键字：组合 选择 复选框      更新时间：2023-09-26

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

如果选择checkbox2则显示List2

否则，如果未选择两个checkbox1 & checkbox2，则隐藏列表1和列表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();
          }
        });
});

我认为这就是你想要的？

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

这看起来像您正在寻找的内容

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

似乎有效：

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

js小提琴示例

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

$('#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>

$(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();
        }
    });
});
相关文章：