проверка нескольких флажков javascript - PullRequest
Новая
       6

проверка нескольких флажков javascript

0 голосов
/ 03 апреля 2012

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

<script language="javascript">
function validate() {
    var chks = document.getElementsByName('id[][]');
    var hasChecked = false;
    for (var i = 0; i < chks.length; i++) {
        if (chks[i].checked) {
            hasChecked = true;
            break;
        }
    }
    if (hasChecked == false) {
        alert("Please select at least one.");
        return false;
    }
    return true;
}
</script>

и форма, которая может иметь или не иметь больше флажков в конце: 

<form 
enctype="multipart/form-data" 
method="post" 
action="formsubmission.php"
name="form_type" onSubmit="return validate()">

<input id="attrib-8-10" type="checkbox" value="10" name="id[8][10]">
<label class="Checkbox" for="attrib-8-10">thick</label>
<input id="attrib-8-11" type="checkbox" value="11" name="id[8][11]">
<label class="Checkbox" for="attrib-8-11">medium</label>
<input id="attrib-8-12" type="checkbox" value="12" name="id[8][12]">
<label class="Checkbox" for="attrib-8-12">thin</label>

Ответы [ 3 ]

1 голос
/ 03 апреля 2012

Эта строка является виновником: 

var chks = document.getElementsByName('id[][]');

Атрибут id элемента HTML должен быть уникальным, каковым является ваш.Атрибут name предназначен для логической группировки элементов (особенно в случае флажков и переключателей).

Чтобы сгруппировать их, имя должно быть одинаковым.id[8][10] - это не то же самое, что id[8][11], и ваш вызов document.getElementsByName('id[][]') буквально ищет элементы с именем "id [] []".

Вы должны изменить имя элементов на что-точто соответствует, т.е. "checkboxGroup", а затем использовать document.getElementsByName('checkboxGroup')

0 голосов
/ 03 апреля 2012 
var chks = document.getElementsByName('id[][]');

Не выбирает ни одного элемента, так как вы указали все индексы для элементов.

Вот как вы можете это сделать? 

var chks= document.getElementsByTagName('input');
for (var x=0; x < chks.length; x++) {
    if (chks[x].type.toUpperCase()=='CHECKBOX' && chks[x].checked == true) {
        hasChecked = true;
        break;
    }
}
0 голосов
/ 03 апреля 2012

Возможно использование getElementsByTagName 

var chks = document.getElementsByTagName('input');
for (var i in chks)
{
   if (chks[i].getAttribute('type') == "checkbox")
   {
      if (chks[i].checked)
         hasChecked = true;
   }
}

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

Изменить это 

<input id="attrib-8-10" type="checkbox" value="10" name="id[8][10]">

К 

<input id="attrib-8-10" type="checkbox" value="10" class="checkable" name="id[8][10]">

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

var chks = document.getElementsByTagName('input');
for (var i in chks)
{
   if (chks[i].getAttribute('type') == "checkbox" && chks[i].className == "checkable")
   {
      if (chks[i].checked)
         hasChecked = true;
   }
}
...