引导程序使用 js 检查/取消选中多个元素

bootstrap check/uncheck multiple elements with js

本文关键字：元素 取消 js 检查 引导程序      更新时间：2023-09-26

我正在尝试完成这项工作，但无法实现。我有一个引导模板，我想选中和取消选中多个复选框（如下所示：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/哪个不起作用

你需要上升两个阶段而不是一个阶段。 parent（） 给你标签元素，你需要转到 "controls" 类的div 来应用你的 find 方法：

var $checkboxes = $（this）.parent（）.parent（）.find（'input[type=checkbox]'）;

当然，这是为了对代码方式进行最小的更改。Joe 在这里提供的那个可能更聪明：获取您想要的所有复选框，而无需使用 parent（） 方法。但要做到这一点，您可能需要标识您的复选框组，以便您不会选中 DOM 中的所有复选框。

顺便说一句，您不必在某个时候显示您的隐藏div 才能看到您的复选框吗？

编辑>好吧，实际上马尼什对父母是对的，这是刚刚好，忘记我的答案:D

相关文章：