如何使用jquery檢查父複選框時選中如何驗證子複選框？

Question

如何驗證atleat一個孩子複選框被選中，同時複選框使用jquery

複選框。

<form name="frm" action="#" method="post" onsubmit="return validation()"> 
    <ul> 
    <li><input type="checkbox" name="cat[]" id="cat1" value="C1" /> 
    <ul> 
    <li><input type="checkbox" name="sub_cat[]" id="cat1_s1" value="S1" /></li> 
    <li><input type="checkbox" name="sub_cat[]" id="cat1_s2" value="S3" /></li> 
    <li><input type="checkbox" name="sub_cat[]" id="cat1_s3" value="S4" /></li> 
    </ul> 
    </li> 
    <li><input type="checkbox" name="cat[]" id="cat2" value="C2" /> 
    <ul> 
    <li><input type="checkbox" name="sub_cat[]" id="cat2_s4" value="S4" /></li> 
    <li><input type="checkbox" name="sub_cat[]" id="cat2_s5" value="S5" /></li> 
    <li><input type="checkbox" name="sub_cat[]" id="cat2_s6" value="S6" /></li> 
    </ul> 
    </li> 
    </ul> 
<input type="submit" name="submit" value="Submit" /> 
</form> 

如果我檢查id =「cat1」複選框，我需要提醒請從列表中選擇至少一個孩子。如何驗證使用jquery並行地適用於父複選框id =「cat2」。

Answer 1

你可以這樣做：

$("[name^=cat]").change(function() { 
    var childBox = $(this).parent("li").find("ul li input:checked"); 
    if (!childBox.length) 
     alert("Please select a child checkbox"); 
}); 

Answer 2

$("input[name^='cat']").change(function()({ 

if($(this).is(":checked")) 
{ 

if($(this).find(":checkbox:checked").length) 
{ 
// if checked do your stuff 
}else{ 
alert("please select child element"); 
} 
} 


}); 

Answer 3

嘗試類似的東西：

$("#cat1").click(function() { 
    // this function will get executed every time the #cat1 element is clicked (or tab-spacebar changed) 
    if($(this).is(":checked")) // "this" refers to the element that fired the event 
    { 
     $("#panel :input").attr("checked",true); 
    } 
}); 

Answer 4

您可以將類分配給母公司的複選框，並使用下面的代碼來驗證孩子的選擇。

EG。這裏父複選框已類命名爲 「父」

$('input.parent').change(function(){  
    var id = $(this).attr('id');  
    if($('input[id^="'+id+'_"]:checked').length < 1){ 
     alert("Please select at least one child."); 
    } 
}); 

這裏的這樣的JSFiddle

Answer 5

道：

$(function() { 
    // ^= attribute which starts with 
    $("input[name^='cat']").on("change", function() { 
     // If it's been checked and the number of checked children 
     // is smaller then one 
     if ($(this).is(":checked") && $(this).next().find("input[name^='sub_cat']:checked").length < 1) 
      alert("Please select something"); 
    }); 
}); 

演示：http://jsfiddle.net/tQtXV/

Answer 6

我自己的建議是：

$('input[name="cat[]"]').change(function(){ 
    $(this).next('ul').find('input[type="checkbox"]').prop('checked', this.checked); 
}); 

$('input[name="sub_cat[]"]').change(function(){ 
    var parent = $(this).closest('ul'); 
    parent.prev().prop('checked', function(){ 
     return parent.find('input[name="sub_cat[]"]').length === parent.find('input[name="sub_cat[]"]:checked').length; 
    }); 
}); 

JS Fiddle demo。

參考文獻：

• Attribute-equals ([attribute="value"]) selector。
• :checked selector。
• closest()。
• find()。
• parent()。
• prop()。