使用js引导检查/取消检查多个元素 [英] bootstrap check/uncheck multiple elements with js

问题描述

我正在努力完成这项工作，但无法实现.我有一个引导程序模板，我想选中和取消选中多个复选框(例如: http://jsfiddle.net/v6wmV/177/) 我知道这是具有许多解决方案的常见主题，但似乎没有一个适用于这种情况的解决方案，我想知道为什么.

I am trying to make this work but can't make it happen. I have a bootstrap template and i want to check and uncheck multiple checkboxes (like this: http://jsfiddle.net/v6wmV/177/ ) I know this is a common subject with many solutions, but none seem to work for this case and i would like to know why.

这是视图中的代码段:

<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/ 这不起作用

this is the fiddle: http://jsfiddle.net/jimena/j56Dy/ which is not working

推荐答案

您需要上两个阶段，而不是上一个阶段. parent()为您提供了label元素，您需要转到"controls"类的div才能应用您的find方法:

you need to go up two stages instead of one. parent() gives you the label element, you need to go up to the "controls"-classed div to apply your find method :

var $ checkboxes = $(this).parent().parent().find('input [type = checkbox]');

var $checkboxes = $(this).parent().parent().find('input[type=checkbox]');

当然，这是对您的代码方式进行最小的更改. Joe up在这里提供的选项可能更聪明:无需使用parent()方法即可获取所需的所有复选框.但是要这样做，您可能希望对自己的复选框组进行标识，以免您不选择整个DOM上的所有复选框.

Of course that was to apply minimal change to your code way. The one provided by Joe up here is probably smarter : getting all the checkboxes you want without having to use parent() method. But to do so you might want to id your checkbox group so that you do not select all the checkboxes accross your DOM.

顺便说一句，您是否不必在某个时候显示Hide div才能看到您的复选框?

By the way, don't you have to show your hide div at some point to see your checkboxes ?

编辑>好吧，实际上Manish和父母在一起是正确的，忘了我的答案:D

Edit> OK actually Manish is right with parents it is just right, forget my answer :D

这篇关于使用js引导检查/取消检查多个元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！