0

親チェックボックスがの配列でチェックされている間に、少なくとも1つの子チェックボックスがチェックされていることを検証する方法

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" チェックボックスをオンにした場合、リストから少なくとも 1 人の子供を選択してくださいという警告が必要です。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 に答える