JQuery: получение серии флажков для проверки - PullRequest
Новая
       21

JQuery: получение серии флажков для проверки

1 голос
/ 13 марта 2019

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

<div><label><input type="checkbox" value="0-2"  name="_ecp_custom_5[]" /> 0-2</label></div>
<div><label><input type="checkbox" value="3-5"  name="_ecp_custom_5[]" /> 3-5</label></div>
<div><label><input type="checkbox" value="6-8"  name="_ecp_custom_5[]" /> 6-8</label></div>

и так далее .....

Итак, у меня есть это в моем JavaScript: 

jQuery(document).ready(function($) {
    $('[name="_ecp_custom_3"]').attr("required", true);
    $('[name="_ecp_custom_5[]"]').prop("checked", true);
});

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

Озадачено, что с этим делать, поскольку в этой функции проверки будет несколько правил.

Ответы [ 2 ]

0 голосов
/ 13 марта 2019

Требуется установить хотя бы один флажок, верно?

Вы можете перебрать все входные данные со значением атрибута имени "_ ecp_custom_5 []" с помощью jQuery.each () .При этом вы можете создать любую переменную-флаг, которая будет использоваться при любом условии.

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

Если вы хотите, чтобы был установлен хотя бы один флажок, вы можете использовать этот пример в качестве основы 

$(function() {
  $('#btnValidate').click(function() {
    var flag = false;

    $.each($('[name="_ecp_custom_5[]"]'), function(index, value) {
      var checkboxStatus = $(this).prop('checked');

      if (checkboxStatus == true) {
        flag = checkboxStatus;
      }
    });

    if (flag == false) {
      alert('No checkbox has been checked')
    } else {
      alert('Success!')
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <label>
    <input type="checkbox" value="0-2"  name="_ecp_custom_5[]" /> 0-2
  </label>
</div>
<div>
  <label>
    <input type="checkbox" value="3-5"  name="_ecp_custom_5[]" /> 3-5
  </label>
</div>
<div>
  <label>
    <input type="checkbox" value="6-8"  name="_ecp_custom_5[]" /> 6-8
  </label>
</div>

<button id="btnValidate" style="margin-top: 20px;">Validate</button>

Как я это сделал?

Я перебрал все входные данные со значением атрибута name "_ ecp_custom_5 []" .

Затем я создал логическую переменную с именем "flag" (значение по умолчанию false ), которая изменяется на true , только если установлен флажокиз итерации имеет значение prop ('флажок') true .Если флажок не установлен, то значение переменной "flag" останется false , что будет проверено моим условием.

0 голосов
/ 13 марта 2019

Если вы используете html:

Имя и идентификатор элемента html не могут включать специальные символы, такие как [ ], а должно начинаться с буквы (AZ), (az).

Кроме того, ваш jQuery ссылается на элемент с name=_ecp_custom_5, а не name=_ecp_custom_5[].Просто удалите [] в своих именах, и ваш код будет работать.

Обновление

$('[name=foo]').prop("checked", true) устанавливает все флажки с name=foo для проверки.Я немного запутался в том, что вы спрашиваете в данный момент, поскольку кажется, что вы запутались в том, почему ваша форма отправляет все входные данные флажка как отмеченные?

...