在复选框组循环中选择至少1个复选框

时间:2013-08-28 15:58:14

标签: javascript jquery checkbox

我试图让这个东西工作一段时间,但我想我需要从某个地方调整代码。我想,有人在这里可以更好地指导我,而不是把头撞到我的编码屏幕上:))

这是实际的过程:

<input type="hidden" name='oneSelectionChk_1'>
<input type="checkbox" name='awp_group_1' id='id1'>
<input type="checkbox" name='awp_group_1' id='id2'>
<input type="checkbox" name='awp_group_1' id='id3'>
<input type="checkbox" name='awp_group_1' id='id4'>


<input type="hidden" name='oneSelectionChk_2'>
<input type="checkbox" name='awp_group_2' id='id5'>
<input type="checkbox" name='awp_group_2' id='id6'>
<input type="checkbox" name='awp_group_2' id='id7'>
<input type="checkbox" name='awp_group_2' id='id8'>

<input type="hidden" name='oneSelectionChk_3'>
<input type="checkbox" name='awp_group_3' id='id9'>
<input type="checkbox" name='awp_group_3' id='id10'>
<input type="checkbox" name='awp_group_3' id='id11'>
<input type="checkbox" name='awp_group_3' id='id12'>

我正在使用的jQuery是:

var chkFields = $("input[name='oneSelectionChk']");
$.each(chkFields, function(i, field){
var groupID = field.id.split('_'); // Getting the ID of the group
var  chkGroupBoxes = $('input[name="awp_group_"'+groupID[1]);
   if(field.value==1)
   {
            //$.each(chkGroupBoxes, function(j, thisChkBox){
               //alert(thisChkBox.value + " #"+j);
               alert( $('input[name="awp_group_"'+groupID[1]).filter(':checked').length);
                 if($('input[name="awp_group_"'+groupID[1]+':checked').length > 0 )
                   {
                            //$.scrollTo( '#awp_container', 1200 );
                           alert($('input[name="awp_group_"'+groupID[1]+':checked').length+" Selected ");
                           //alert( "Class AlertMsgText Should be removed Now");
                           $("#selectInstruction_"+groupID[1]).removeClass("AlertMsgText");
                         //return
                   }
                   else
                   {
                      alert($('input[name="awp_group_"'+groupID[1]+':checked').length+" Still not selected ");
                     //alert("Please select atleat 1 from Option #"+groupID[1]);
                     $("#selectInstruction_"+groupID[1]).addClass("AlertMsgText");
                     $.scrollTo( '#awp_container', 1200 );
                    //return;
                 }
          //});
      }
    });

这段代码总是给我0长度的复选框,我不确定我是否需要为每个复选框再次循环,否则这可能有效?

任何快速帮助都应该受到赞赏!

2 个答案:

答案 0 :(得分:1)

尝试

var chkFields = $('input[name^="oneSelectionChk"]');
$.each(chkFields, function (i, field) {
    var groupID = field.name.replace('oneSelectionChk_', '')
    var chkGroupBoxes = $('input[name="awp_group_' + groupID + '"]');

    if (chkGroupBoxes.filter(':checked').length == 0) {
        alert('please select at least one checkbox under: ' + field.name)
    }
});

演示:Fiddle

答案 1 :(得分:0)

标记中没有name oneSelectionChk属性的元素,隐藏的输入具有以name开头的oneSelectionChk属性,您必须使用{{1选择器。

如果元素是兄弟元素,您可以使用attribute starts with方法选择目标元素:

.nextUntil()

使用var $hidden = $('input[type=hidden]').filter('[name^=oneSelectionChk]'); $hidden.each(function(){ var $chekboxes = $(this).nextUntil('input[type=hidden]'), $checked = $checkboxes.filter(':checked'), $unchecked = $chekboxes.not($checked); }); 属性:

name