使用jQuery检查/取消选中bootstrap复选框

我昨天又发了一篇文章 ,并没有成功。 我现在会尝试重新排序de idea并再次询问,因为我找不到解决方案(我是新手,我正在努力尝试)。

问题是我正在使用基于Bootstrap的这个模板,这是我可以直接从其中一个文件中看到的代码,我在项目中使用的代码:

html片段:

经过大量的搜索,我在检查时发现我的代码看起来像这样(片段):

 

正如你所看到的,添加了另一个div和另一个span(严重不知道为什么或如何)所以我猜现在它是一个DOM问题我正在拥有的。

这是我的js文件的片段:

 $('#allstates').click(function() { $('.checkbox').find('span').addClass('checked'); }); 

因此,此函数选择我拥有的所有复选框(即使是我不想要的复选框,因为它们属于另一个类别)。

我想知道为什么添加div和span以及如何只选择我想要的复选框。

为此,我一直在尝试这样的代码,但没有成功:

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

以及我删除的其他内容。

注意:检查时没有显示js错误

同样重要的是在选择复选框时将prop添加到true:

 $("#checkAll").click(function(){ var check = $(this).prop('checked'); if(check == true) { $('.checker').find('span').addClass('checked'); $('.checkbox').prop('checked', true); } else { $('.checker').find('span').removeClass('checked'); $('.checkbox').prop('checked', false); } }); 

因为我提到这个函数检查了我所有的复选框(即使那些不应该被检查的复选框),我一直在努力寻找解决方案:

 $('#allstates').click(function() { $('.checkbox').find('span').addClass('checked'); }); 

但这不是我想要的。 我还提到我注意到代码在检查时是“不同的”(在Chrome中使用F12)。 正如@thecbuilder所说,它会改变以增加风格。

我意识到,因为代码正在改变……我不得不改变我开始“span tag”搜索的类(复选框),所以我将类复选框更改为id状态,这是结果:

 $('#allstates').click(function() { if($(this).attr("checked")){ $('#states').find('span').addClass('checked'); }else{ $('#states').find('span').removeClass('checked'); } }); 

现在它终于奏效了。

我想你正在寻找像这样的代码:

 $(document).ready(function() { $("#allstates").on("change", function() { var checked = $(this).prop("checked"); $(this).parents(".controls") .first() .find("input[type=checkbox]") .prop("checked", checked); }); }); 

JsFiddle示例

当具有id allstates的复选框的状态发生变化时,获取复选框值,找到带有名为controls的类的第一个父html元素,然后仅使用checked的值更新该元素中的所有复选框。

简单的引导复选框

  

在Chrome开发工具中进行调试时,标签看起来像https://tinker.press/images/bootstrap-checkbox-label-2017-01-17_084755.png

要使用toogle复选框状态,只需在lable.control.checked上设置true|false

 label.control.checked = false; //uncheck label.control.checked = true; //check 

video演示https://youtu.be/3qEMFd9bcd8