0

如何验证 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"。

4

6 回答 6

1

你可以做：

$("[name^=cat]").change(function() {
    var childBox = $(this).parent("li").find("ul li input:checked");
    if (!childBox.length)
        alert("Please select a child checkbox");
});
于 2013-10-16T13:06:18.083 回答
0 
$("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");
}
}


});
于 2013-10-16T13:06:38.897 回答
0

尝试这样的事情：

$("#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);
    }
});
于 2013-10-16T13:06:44.017 回答
0

您可以为父复选框分配一个类，并使用以下代码来验证子选择。

例如。这里父复选框的类名为“父”

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

这是JSFiddle

于 2013-10-16T13:11:08.613 回答
0

这样做的一种方法：

$(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/

于 2013-10-16T13:11:51.970 回答
0

我自己的建议是：

$('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 小提琴演示。

参考：

于 2013-10-16T13:12:17.470 回答