我正在努力使这项工作,但无法实现。我有一个bootstrap模板,我想检查并取消选中多个复选框(如下所示:http://jsfiddle.net/v6wmV/177/) 我知道这是一个有许多解决方案的常见主题,但似乎没有一个适用于这种情况,我想知道原因。
这是视图中的代码段:
<div class="hide" id="states">
<div class="control-group">
<label class="control-label">Select</label>
<div class="check">
<div class="controls">
<label class="checkbox line">
<input type="checkbox" class="all" value="Todas" id="allstates" name="st[25]"/>All
</label>
<label class="checkbox line">
<input type="checkbox" value="Caba" id="" name="st[1]"/>Ciudad Autónoma de Buenos Aires
</label>
<label class="checkbox line">
<input type="checkbox" value="Buenos Aires" id="" name="st[2]"/> Buenos Aires
</label>
<label class="checkbox line">
<input type="checkbox" value="Catamarca" id="" name="st[3]"/> Catamarca
</label>
<label class="checkbox line">
<input type="checkbox" value="Chaco" id="" name="st[4]"/> Chaco
</label>
</div>
</div>
</div>
</div>
这是我的js文件(包含其他功能):
$('.hide').hide();
$('#registered').click(function(){
$('#content').toggle('fast');
});
$('#age').click(function () {
$('#content2').hide('fast');
$('#content1').show('fast');
});
$('#range').click(function () {
$('#content1').hide('fast');
$('#content2').show('fast');
});
$('#with').click(function(){
$('#child').toggle('fast');
});
$('#showstates').click(function(){
$('#states').show('fast');
});
$('#hidestates').click(function(){
$('#states').hide('fast');
});
//function for check/uncheck
$('.all').click(function() {
var $checkboxes = $(this).parent().find('input[type=checkbox]');
$checkboxes.prop('checked', $(this).is(':checked'));
});
这是小提琴:http://jsfiddle.net/jimena/j56Dy/ 这是行不通的
答案 0 :(得分:0)
你需要上升两个阶段而不是一个阶段。 parent()为您提供label元素,您需要转到“controls”-classed div来应用您的find方法:
var $ checkboxes = $(this).parent()。parent()。find('input [type = checkbox]');
当然,这是对您的代码方式应用最小的更改。 Joe在这里提供的那个可能更聪明:获取所需的所有复选框而无需使用parent()方法。但要这样做,您可能需要为您的复选框组添加ID,这样您就不会选择DOM中的所有复选框。
顺便说一下,你不必在某个时候出示你的隐藏div来查看你的复选框吗?
编辑&gt;好吧,实际上Manish对父母来说是正确的,忘了我的回答:D