JQuery Проверка нескольких групп флажков - PullRequest
Новая
       12

JQuery Проверка нескольких групп флажков

1 голос
/ 24 декабря 2011

У меня есть две следующие группы флажков: 

<fieldset class="CbxGroup">
  <legend>Checkbox Group (required)</legend>
  <label><input type="checkbox" name="cbxGroup1[]" value="one" id="cbxGroup1_0">One </label>
  <br>
  <label><input type="checkbox" name="cbxGroup1[]" value="two" id="cbxGroup1_1">Two </label>
  <br>
  <label><input type="checkbox" name="cbxGroup1[]" value="three" id="cbxGroup1_2">Three</label>
  <br>
  <label><input type="checkbox" name="cbxGroup1[]" value="four" id="cbxGroup1_3">Four </label>
  <br>
  <label><input type="checkbox" name="cbxGroup1[]" value="five" id="cbxGroup1_4">Five </label>
  <br>
</fieldset>

<fieldset class="CbxGroup">
<legend>Checkbox Group (required)</legend>
  <label><input type="checkbox" name="cbxGroup2[]" value="one" id="cbxGroup2_0">One </label>
  <br>
  <label><input type="checkbox" name="cbxGroup2[]" value="two" id="cbxGroup2_1">Two </label>
  <br>
  <label><input type="checkbox" name="cbxGroup2[]" value="three" id="cbxGroup2_2">Three</label>
  <br>
  <label><input type="checkbox" name="cbxGroup2[]" value="four" id="cbxGroup2_3">Four </label>
  <br>
  <label><input type="checkbox" name="cbxGroup2[]" value="five" id="cbxGroup_4">Five </label>
  <br>
</fieldset>

Каждая группа флажков (fieldset) помечена тем же именем класса. Я хотел бы проверить каждую ГРУППУ, чтобы в КАЖДОЙ группе был выбран хотя бы один флажок.

У меня есть следующий JQuery, но он видит их как одну группу, а не как две отдельные. Можете ли вы помочь мне настроить этот код, чтобы он проверял каждую группу отдельно? 

$('.CbxGroup').each(function() {
        if($('.CbxGroup input[type=checkbox]:checked').length == 0) {
            alert('not selected!');
        }
        else{
            alert('selected!');
        }
    });

Таким образом, я могу добавить любое количество групп-флажков и сделать так, чтобы все они были проверены, а писать отдельные фрагменты кода для каждой группы.

Спасибо!

Ответы [ 2 ]

2 голосов
/ 24 декабря 2011

Все, что вам нужно, это изменить селектор для проверки длины: 

$('.CbxGroup').each(function() { 
    if($(this).find('input[type=checkbox]:checked').length == 0) { 
        alert('not selected!'); 
    } 
    else{ 
        alert('selected!'); 
    } 
});
2 голосов
/ 24 декабря 2011

Это должно работать: 

$('.CbxGroup').each(function() {
    if ($(this).find(':checked').length == 0) {
        alert('not selected!');
    }
    else{
        alert('selected!');
    }
});
...