CODEWITHSUNDEEP
jquery
Ramki
Ramki

Reputation: 519

How to validate a child checkbox is checked while parent checkbox is checked using jquery?

How to validate atleat one child checkbox is checked while parent checkbox is checked in a array of

checkbox using 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>

If i am check id="cat1" checkbox i need to alert please select atleast one child from the list. How to validate using jquery parallely it apply for parent checkbox id="cat2".

Upvotes: 0

Views: 723

Answers (6)

David Thomas
David Thomas

Reputation: 253506

My own suggestion would be:

$('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.

References:

Upvotes: 0

emerson.marini
emerson.marini

Reputation: 9348

A way of doing this:

$(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");
    });
});

Demo: http://jsfiddle.net/tQtXV/

Upvotes: 0

bitkot
bitkot

Reputation: 4514

You can assign a class to the parent checkboxes and use the following code to verify the child selection.

EG. Here parent checkbox has class named "parent"

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

Here's the JSFiddle

Upvotes: 0

Odward
Odward

Reputation: 113

Try something like that :

$("#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);
    }
});

Upvotes: 0

Rituraj ratan
Rituraj ratan

Reputation: 10388

$("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");
}
}


});

Upvotes: 0

tymeJV
tymeJV

Reputation: 104795

You can do:

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

Upvotes: 1

Related Questions