jquery复选框显示隐藏div不工作

我想使用jQuery的显示/隐藏来控制基于复选框被选中或否的div的显示。（我也尝试过使用CSS无法显示/块的方法。）jquery复选框显示隐藏div不工作

我可以得到代码来检查复选框然后让div显示或隐藏，但是我无法得到我的“全部检查”按钮也起作用，如果特定复选框被选中，则相应地显示/隐藏div。

我把它变成的jsfiddle这里：https://jsfiddle.net/gamehendgeVA/2jszhdzw/

是否有人可以帮助我获得两个单选框选中显示/隐藏连同工作“检查所有”按钮显示和隐藏基于特定的复选框的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 -->

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

来源

2015-10-25 gamehendgeVA

这是因为searchDomainCheckbox的事件已经被连接到的元素。因此，您必须手动触发，如下所示：$('.searchDomainCheckbox').trigger('change');

将此代码放在#checkAllDomains的事件点击上，并很高兴！

这是我的解决方案：

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

注意：把触发内部updateCheckAllButtonDomains的（）引起“最大调用堆栈大小超过了”。

来源

2015-10-25 03:39:12

非常感谢。 ..以上Diptox完全是正确的轨道，但我有一些奇怪的问题，并没有一直显示......你的代码（触发器改变的位置）做了一个完美的伎俩，我的表格现在看起来很稳定......感谢你非常想帮助我...... :-) – gamehendgeVA

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"); 
}

来源

2015-10-25 03:06:46 Diptox

谢谢你sooo，工作就像一个魅力......（小方面注意，你的代码在那里有“更改”行之前else），一旦我像你的小提琴后移动它，很好...感谢你这么多，我不知道这件事情，现在就读它:-) – gamehendgeVA

：D触发器应该在if和else之后，如果全部被检查，它会触发 – Diptox

这里是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; 
     }); 
    } 
});

来源

2015-10-25 03:08:55 Florin

jquery复选框显示隐藏div不工作

回答

相关问题