Question

如果在

数组中选中父复选框，则会检查如何验证atleat one child复选框

使用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。这里父复选框具有名为“parent”的类

   $('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()。

使用jquery检查父复选框时，如何验证子复选框？

6 个答案: