Выделите по крайней мере 1 флажок в элементе checkboxs group

Question

Я пытаюсь заставить эту вещь работать некоторое время, но я думаю, мне нужно где-то настроить код. Я думал, что кто-то здесь мог бы лучше вести меня вместо того, чтобы биться головой к моему кодирования экрана :)

вот сам процесс:

<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 длинных галочек, я не уверен, что мне нужно прокручивать снова для каждого флажка, или это может сработать?

Любая быстрая помощь должна быть оценена!

Answer 1

Там нет элемента с name атрибутом oneSelectionChk в разметке, скрытые входы имеют name атрибуты, которые начинаются с oneSelectionChk, вы должны использовать 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 атрибутов:

var $hidden = $('input[type=hidden]').filter('[name^=oneSelectionChk]'), 
    $checkboxes = $('input[type=checkbox]'); 

$hidden.each(function() { 
    var n = this.name.split('_')[1]; 
    var $grp = $checkboxes.filter('[name="awp_group_'+ n +'"]'); 
    // .. 
}); 

Answer 2

Попробуйте

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