jquery 复选框显示隐藏 div 无效

Question

我正在尝试使用 jQuery show/hide 根据复选框是否被选中来控制 div 的显示。（我也尝试过 CSS 显示 none/block 的方法。）

我可以让代码通过选中复选框然后让 div 显示或隐藏来工作，但是，如果特定的话，我无法让我的 "check all" 按钮也起作用复选框被选中，相应地 show/hide div。

我把它放到这里的 JSFiddle 中：https://jsfiddle.net/gamehendgeVA/2jszhdzw/

有人可以帮我选中单个复选框 show/hide 以及 "check all" 按钮，根据选中的特定复选框显示和隐藏 div 吗？

感谢您的帮助！

HTML

<div class="panel panel-info">
<div class="panel-heading"><h3 class="panel-title">Search These Domains</h3></div>
<div class="panel-body">
<input type="button" class="btn btn-primary btn-xs" data-toggle="button" value="all domains" id="checkAllDomains" />
<br />
<div class="col-md-6">
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox" id="domainCheckbox1">One</label></div>
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox">Two</label></div>
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox">Three</label></div>
</div>
<div class="col-md-6">
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox">Four</label></div>
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox">Five</label></div>
<div class="checkbox"><label><input type="checkbox" class="searchDomainCheckbox">Six</label></div>
</div>
</div> <!-- /.panel-body -->
</div> <!-- /.panel -->
<div class="panel panel-info" id="div1">
<div class="panel-heading"><h3 class="panel-title">Search These Divisions</h3></div>
<div class="panel-body">
THIS DIV SHOULD ONLY APPEAR WHEN "#domainCheckbox1" is checked, either when checked on its own, or checked when the "all domains" button checks it.
</div> <!-- /.panel-body -->
</div> <!-- /.panel -->

JS

$('#div1').hide();
$('#domainCheckbox1').change(function(){
  if($(this).prop("checked")) {
    $('#div1').show();
  } else {
    $('#div1').hide();
   }
});
/////////
$(function() {
    function updateCheckAllButtonDomains() {
        if ($('.searchDomainCheckbox:checked').length == $('.searchDomainCheckbox').length) {
        $('#checkAllDomains').val('uncheck all').data('check', false);
    } else {
        $('#checkAllDomains').val('all domains').data('check', true);
    }       
}
$('.searchDomainCheckbox').change(function() {
    updateCheckAllButtonDomains();
});
$('#checkAllDomains').click(function() {
    $('.searchDomainCheckbox').prop('checked', $(this).data('check'));
    updateCheckAllButtonDomains();
});
updateCheckAllButtonDomains();
});

Answer 1

Demo

只要触发 Change 事件，它就应该起作用

function updateCheckAllButtonDomains() 
{
    if ($('.searchDomainCheckbox:checked').length == $('.searchDomainCheckbox').length)
        $('#checkAllDomains').val('uncheck all').data('check', false);
    else 
        $('#checkAllDomains').val('all domains').data('check', true);

    $("input.searchDomainCheckbox").trigger("change");
}

Answer 2

这是jsFiddle

HTML

<div class="panel panel-info">
<div class="panel-heading">
    <h3 class="panel-title">Search These Domains</h3>
</div>
<div class="panel-body">
    <input type="checkbox" id="checkAllDomains" />
    <label>Check All</label>
    <br />
    <div class="col-md-6">
        <div class="checkbox">
            <label>
                <input type="checkbox" class="searchDomainCheckbox">One</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" class="searchDomainCheckbox">Two</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" class="searchDomainCheckbox">Three</label>
        </div>
    </div>
    <div class="col-md-6">
        <div class="checkbox">
            <label>
                <input type="checkbox" class="searchDomainCheckbox">Four</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" class="searchDomainCheckbox">Five</label>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox" class="searchDomainCheckbox">Six</label>
        </div>
    </div>
</div>
<!-- /.panel-body -->

JAVASCRIPT

$('#checkAllDomains').click(function (event) {
    if (this.checked) {
        $('.searchDomainCheckbox').each(function () {
            this.checked = true;
        });
    } else {
        $('.searchDomainCheckbox').each(function () {
            this.checked = false;
        });
    }
});

Answer 3

发生这种情况是因为 searchDomainCheckbox 事件已附加到该元素。所以，你必须手动触发，像这样：$('.searchDomainCheckbox').trigger('change');

将此代码放在#checkAllDomains 的事件点击上，祝您愉快！

这是我的解决方案：

$('#checkAllDomains').click(function() {
    $('.searchDomainCheckbox').prop('checked', $(this).data('check'));
    $('.searchDomainCheckbox').trigger('change');
    updateCheckAllButtonDomains();
});

注意：将触发器放在 updateCheckAllButtonDomains() 中会导致 "Maximum call stack size exceeded"。

jquery 复选框显示隐藏 div 无效

jquery checkbox show hide div not working

jquery

show

show-hide

twitter-bootstrap-3