选中/取消选中父母和孩子
时间:2020-03-06 14:59:08 来源:igfitidea点击:
我们可以编写更好的代码吗?我需要检查/根据父母当孩子被检查,检查父,取消所有孩子的时候孩子的一切都选中取消选中父。
$(".parent").children("input").click(function() { $(this).parent().siblings("input").attr("checked", this.checked); }); $(".parent").siblings("input").click(function() { if (this.checked) { $(this).siblings("div").children("input").attr("checked", true); return; } var childs = $(this).siblings("div").siblings("input"); for (i = 0; i < childs.length; i++) { if ($(childs.get(i)).attr("checked")) return; } $(this).parent().children("div").children("input").attr("checked", false); });
解决方案
$(".parent").children("input").click(function() { $(this).parent().siblings("input").attr("checked", this.checked); }); $(".parent").siblings("input").click(function() { $(this).siblings("div").children("input").attr("checked", this.checked || $(this).siblings("input[checked]").length>0 ); });
哇,我很困惑。看起来好像我们在其中具有其他输入的输入? ...这没有任何意义。我认为这是结构的样子,所以我继续。
<div class="parent"> <input type="checkbox" /> <div> <input type="checkbox" /> <input type="checkbox" /> </div> <input type="checkbox" /> <div> <input type="checkbox" /> <input type="checkbox" /> </div> </div>
这是我要使用的代码。
$("input[type='checkbox']").click(function() { // turn on or off all descendants. $(this) // get this checkbox // get the div directly after it .next('div') // get ALL the inputs in that div (not just first level children) .find("input[type='checkbox']") .attr("checked", this.checked) ; // now check if we have to turn the parent on or off. $(this) .parent() // this will be the div .prev('input[type="checkbox"]') // this is the input .attr( "checked", // set checked to true if... this.checked // this one is checked, or... || $(this).siblings("input[type='checkbox'][checked]").length > 0 // any of the siblings are checked. ) ; });
更新:我刚刚测试了它,它完全可以工作(呜!)。它也可以根据需要使用多个级别的嵌套,而不仅仅是两个。
这是一个可爱的小话题,使我几乎可以适应我的需要。我稍微修改了尼克的代码。目的是检查孩子也将检查父母,取消选中父母也将取消所有孩子。
$(" input [type ='checkbox']")。click(function(){
如果(!$(this.checked)){
$(this) .next('div') .find("input[type='checkbox']") .attr("checked", this.checked) ; } $(this) .parent() .prev('input[type="checkbox"]') .attr("checked", this.checked || $(this).siblings("input[type='checkbox'][checked]").length > 0 ) ;
});
如果不对父项进行检查,那么如何进行调整以使所有后代都不受检查呢?
JQ和javascript..apologies的所有新特性。