驗證在動態添加的字段上選擇的至少一個復選框

Question

如果您要將表單字段動態添加到現有表單，添加驗證的最佳方法是什么？

考慮一下這個小提琴： 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>

在該表單上，我添加了新的復選框組，並希望確保每個組中至少有一個框被選中（不是所有組中的一個框）。 有人有任何聰明的方法嗎？ 由於動態添加字段，我所看到的一切都會變得非常復雜。

Answer 1

在提交等時驗證復選框是否是動態的並不重要。所以這樣的事情會檢查每個.child是否至少檢查一個復選框：

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

小提琴

Answer 2

如果你想使用jQuery檢查它，你可以使用`.each（）

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

您可以在以下鏈接中找到有關此jQuery函數的更多信息： each（）

找（）

Answer 3

這就是我想出來的。 基本上你循環遍歷.chi​​ld組並測試它們是否在選中的狀態下有一個復選框。

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