用jQuery检查/取消选中引导复选框 [英] check/uncheck bootstrap checkboxes with jQuery
问题描述
我昨天又做了另一个帖子，没有成功用它。我会尝试重新排序的想法，并再次问，因为我找不到这个解决方案（我是一个新手，我真的很努力）。
事情是，我正在使用这个模板基于Bootstrap，这是我可以看到直接从一个文件，我在我的项目中使用的代码：
html片段：
< div class =hideid =states>
< div class =control-group>
< label class =control-label> Seleccione< / label>
< div class =controls>
< label class =checkbox span4>
< input type =checkboxvalue =allid =allstatesname =all/> Todas
< / label&
< label class =checkbox span4>
< input class =statestype =checkboxvalue =Cabaid =name =st []/> CiudadAutónomade Buenos Aires
< / label>
< label class =checkbox span4>
< input class =statestype =checkboxvalue =Buenos Airesid =name =st []/>布宜诺斯艾利斯
< / label>
< label class =checkbox span4>
< input class =statestype =checkboxvalue =Catamarcaid =name =st []/> Catamarca
< / label>
< / div>
< / div>
< / div>
经过大量的搜索后，我发现我检查它的代码看起来像这样）：
< div class =controls>
< label class =checkbox span4>
< div class =checkerid =uniform-allstates>
< span>
< input type =checkboxvalue =allid =allstatesname =all>
< / span>
< / div> Todas
< / label>
< label class =checkbox span4>
< div class =checker>
< span>
< input class =statestype =checkboxvalue =Cabaid =name =st []>
< / span>
< / div>布宜诺斯艾利斯市政府
< / label>
< label class =checkbox span4>
< div class =checker>
< span>
< input class =statestype =checkboxvalue =Buenos Airesid =name =st []>
< / span>
< / div>布宜诺斯艾利斯
< / label>
< label class =checkbox span4>
< div class =checker>
< span>
< input class =statestype =checkboxvalue =Catamarcaid =name =st []>
< / span>
< / div> Catamarca
< / label>
< / div>
正如你所看到的，添加了另一个div和另一个span（严重不知道为什么或如何）
这是我的js文件的片段： p> $（'＃allstates'）。click（function（）{
$（' 'span'）。addClass（'checked'）;
}）;
所以这个函数选择所有的复选框（即使我不想要的复选框它们属于另一个类别）。
我想知道为什么添加div和span，以及如何只选择我想要的复选框。
为此，我一直在尝试这样的代码，但没有成功：
测试1 >
$（'＃allstates'）click（function（）{
if（$（this）.is（'： （'checked'））{
$（'span input'）。attr（'checked'，true）;
} else {
$（'span input'）。attr ，false）;
}
}）;
test2
$（'＃allstates'）click（function（）{
$（。states）。 .prop（checked））
}）;
以及其他我删除的。
注意：检查
时未显示任何js错误检查所有的复选框（即使那些不应该被检查），我一直在寻找解决方案：
$（'＃allstates'）。click（function（）{
$（'。checkbox'）。find（'span'）。addClass（'checked'）;
} ）;
但这不是我想要的。我还提到，我注意到代码是不同的，当检查它（在Chrome与F12）。所以像@thecbuilder说的，它改变为了添加样式。
我意识到，因为代码正在改变...我不得不改变类我开始span tag搜索，所以我改变类复选框为id状态，这是结果：
$ '#allstates'）。click（function（）{
if（$（this）.attr（checked））{
$（'＃states'）。 addClass（'checked'）;
} else {
$（'＃states'）。find（'span'）。removeClass（'checked'）;
}
} ）;
现在终于可以了。
I've made another post yesterday and had no success with it. I will try now to reorder de idea and to ask again since I can't find the solution for this (I'm a newbie and I'm trying really hard).
The thing is that I'm working with this template based on Bootstrap, and this is the code that I can see directly from one of the files and that I'm using on my project:
html snippet:
<div class="hide" id="states">
<div class="control-group">
<label class="control-label">Seleccione</label>
<div class="controls">
<label class="checkbox span4">
<input type="checkbox" value="all" id="allstates" name="all"/>Todas
</label>
<label class="checkbox span4">
<input class="states" type="checkbox" value="Caba" id="" name="st[]"/>Ciudad Autónoma de Buenos Aires
</label>
<label class="checkbox span4">
<input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]"/> Buenos Aires
</label>
<label class="checkbox span4">
<input class="states" type="checkbox" value="Catamarca" id="" name="st[]"/> Catamarca
</label>
</div>
</div>
</div>
After lot of searching I have founded when inspecting it that my code looks like this (snippet):
<div class="controls">
<label class="checkbox span4">
<div class="checker" id="uniform-allstates">
<span>
<input type="checkbox" value="all" id="allstates" name="all">
</span>
</div>Todas
</label>
<label class="checkbox span4">
<div class="checker">
<span>
<input class="states" type="checkbox" value="Caba" id="" name="st[]">
</span>
</div> Ciudad Autónoma de Buenos Aires
</label>
<label class="checkbox span4">
<div class="checker">
<span>
<input class="states" type="checkbox" value="Buenos Aires" id="" name="st[]">
</span>
</div> Buenos Aires
</label>
<label class="checkbox span4">
<div class="checker">
<span>
<input class="states" type="checkbox" value="Catamarca" id="" name="st[]">
</span>
</div> Catamarca
</label>
</div>
As you can see, another div and another span are added (seriously don't know why or how) so I'm guessing now it's some DOM problem the one I'm having.
This is snippet of my js file:
$('#allstates').click(function() {
$('.checkbox').find('span').addClass('checked');
});
So this function selects ALL the checkboxes I have (even though the ones that I don't want because they belong to another category).
I want to know why the div and span are added and how to select only the checkboxes that I want.
For that I've been trying code like this but no success:
test 1
$('#allstates').click(function() {
if ($(this).is(':checked')) {
$('span input').attr('checked', true);
} else {
$('span input').attr('checked', false);
}
});
test2
$('#allstates').click(function() {
$(".states").prop("checked",$("#allstates").prop("checked"))
});
and so other ones that I erased.
NOTE: No js errors are being displayed when inspecting
Since I mentioned that this function checked all the checkboxes I had (even though the ones that were not supposed to be checked), I've been trying to look for the solution:
$('#allstates').click(function() {
$('.checkbox').find('span').addClass('checked');
});
But this is not what I wanted. I mentioned also that I noticed that the code was "different" when inspecting it (in Chrome with F12). So as @thecbuilder said, it changes in order to add style.
I realized that since code is changing... I had to change the class (checkbox) from which I was starting the "span tag" search, so I change class checkbox to id states and this is the result:
$('#allstates').click(function() {
if($(this).attr("checked")){
$('#states').find('span').addClass('checked');
}else{
$('#states').find('span').removeClass('checked');
}
});
Now it finally works.
这篇关于用jQuery检查/取消选中引导复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
