jQuery: проверить, установлен ли / установлен один из нескольких обязательных флажков - PullRequest
Новая
       40

jQuery: проверить, установлен ли / установлен один из нескольких обязательных флажков

1 голос
/ 07 марта 2012

У меня есть форма с несколькими группами флажков (среди прочего).Некоторые из этих групп являются обязательными полями (в этой группе должен быть установлен хотя бы один флажок).

Я могу сказать, установлен ли флажок в группе, но я не смог сделать их обязательными.Также мне нужно получить одну длинную строку со значениями выбранного флажка (ов).Мне нужно иметь строку, где, если пользователь проверяет, скажем, первые 3 флажка из группы 1, строка должна быть:"ноль | 1 вал | 2 вал"

Код является упрощенной версией моего оригинала.Вот jFiddle: http://jsfiddle.net/QyY2P/1/

Кроме того, для вашего удобства я также включаю код здесь:

jQuery : 

function countChecked() {
    //Group 1
    var n = $("#group1 input:checked").length;
    $("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
    $("#group1 input:checked").each(function() {
        txt += ($(this).val() + " | ");
        $("#selection1").text(txt);
        alert($(this).val() + " | ");
    });


    //Group 2
    var n = $("#group2 input:checked").length;
    $("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
    $("#group2 input:checked").each(function() {
        txt += ($(this).val() + " | ");
        $("#selection3").text(txt);
        alert($(this).val() + " | ");
    });
}

countChecked();
$(":checkbox").click(countChecked);

HTML : 

<form>
  <div id="group1">
    <p> *Please select a box (Mandatory)</p>
    <input type="checkbox" name="ckb_unit[]" value="zero" />
    <input type="checkbox" name="ckb_unit[]" value="1 val" />
    <input type="checkbox" name="ckb_unit[]" value="2 val" />
    <input type="checkbox" name="ckb_unit[]" value="3 val" />
    <input type="checkbox" name="ckb_unit[]" value="4 val" />
  </div>


  <div id="group2">
      <p>Please select a box</p>
    <input type="checkbox" name="ckb_unit[]" value="zero" />
    <input type="checkbox" name="ckb_unit[]" value="A" />
    <input type="checkbox" name="ckb_unit[]" value="B" />
    <input type="checkbox" name="ckb_unit[]" value="C" />
    <input type="checkbox" name="ckb_unit[]" value="D" />
  </div>

  <div id="group3">
    <p>*Please select a box (Mandatory)</p>
    <input type="checkbox" name="ckb_unit[]" value="zero" />
    <input type="checkbox" name="ckb_unit[]" value="1 A" />
    <input type="checkbox" name="ckb_unit[]" value="2 B" />
    <input type="checkbox" name="ckb_unit[]" value="3 C" />
    <input type="checkbox" name="ckb_unit[]" value="4 D" />
  </div>
</form>

<!-- For debugging purposes -->
<br/>
<div id="count"></div>
<div id="selection1"></div>
<div id="selection3"></div>

PS.Я новичок, возможно, вы заметили это по моей не очень элегантной кодировке> _ <</p>

1 Ответ

1 голос
/ 07 марта 2012

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

var n = $("#group1 input:checked").length;

Глядя на JSFiddle, кажется, что вы не объявили txt как переменную, так что это работает для меня: 

//Group 1
var txt = ""; // initialise txt with an empty string, so you can append to it later
var n = $("#group1 input:checked").length;
$("#count").text(n + (n <= 1 ? " is" : " are") + " checked!");
$("#group1 input:checked").each(function() {
    txt += ($(this).val() + " | ");
    $("#selection1").text(txt);
    alert($(this).val() + " | ");
});
...