验证在动态添加的字段上选择的至少一个复选框

Question

If you're dynamically adding form fields to an existing form, what's the best way of adding validation?

Consider this fiddle: http://jsfiddle.net/yWGK4/

<form action="#" method="post">
<div id="parent">
    <div class="child">
        <input type="checkbox" name="box1[]" value="1" /> 1
        <input type="checkbox" name="box1[]" value="2" /> 2
        <input type="checkbox" name="box1[]" value="3" /> 3
    </div>
</div>
</form> 
<button id="addBoxes">Add Boxes</button>

<script>
$(function() {
    var parentdiv = $('#parent');
    var m = $('#parent div.child').size() + 1;
    $('#addBoxes').on('click', function() {
        $('<div class="child"><input type="checkbox" name="box'+m+'[]" value="1" /> 1 <input type="checkbox" name="box'+m+'[]" value="2" /> 2 <input type="checkbox" name="box'+m+'[]" value="3" /> 3 </div>').appendTo(parentdiv);
        m++;
        return false;
    });
});
</script>

On that form I'm adding new checkbox groups, and want to make sure at least one box from each group is checked (not one box across all groups). Anyone got any clever methods? Everything I've looked at would get very complicated due to the dynamically added fields.

Answer 1

It doesn't matter if the checkboxes are dynamic when validating on submit etc. so something like this would check if at least one checkbox per .child is checked :

$('form').on('submit', function(e) {
    e.preventDefault();
    var valid = true;

    $('.child').each(function() {
        if ( ! $('[type="checkbox"]:checked', this).length ) // no box checked
            valid = false;
    });

    if (valid) {
        this.submit();
    }else{
        alert('error');
    }
});

FIDDLE

Answer 2

If you want to check it using jQuery you can use `.each()

$(".child").each(function(){
   var $this = $(this);
   var checked = $this.find("input:checked");
   if( checked.lenght == 0 ) {
      alert("This group is not valid");
   }
});

You can find more about this jQuery functions in this links: each()

find()

Answer 3

here's what I came up with. Basically you loop over the .child groups and test if they have a checkbox in the checked state..

 $('#checkBoxes').on('click', function(){
    var uncheckedgroups = new Array();
    $('.child').each(function(childindex, childelement){
        var checkFound = 0;
        $('.child').each(function(index, element){
            if($(element).is(':checked')){
                checkFound = 1;
            }
        });
        if(checkFound == 0){
            uncheckedgroups.push(childindex);                
        }
    });
    if(uncheckedgroups.length > 0){
    alert("the following groups have no checked checkbox: " +
         uncheckedgroups.join(','));
    }
});