firefox document.getElementById получить только первый флажок? - PullRequest
1 голос
/ 06 ноября 2011


Этот простой код проверяет, есть ли в аренду один флажок,
Когда я пытаюсь получить массив флажков с помощью Firefox, я не ... Я просто первый
Тот же код работает нормально в IE,
Нужно ли создавать разные идентификаторы для элементов флажка и повторять их? Спасибо за вашу помощь.

<html>
<head>  
<script type="text/javascript">

function testCheckBox(){

var vehicle = document.getElementById('vehicle');
 for (var i=0; i < vehicle.length; i++){                     

    alert(vehicle[i].checked); 
    if (trucks[i].checked){

         alert('at least one was selected');
     return true;
     }
    }

alert('Please select one');
return false;
    }
</script>

</head>
<body>

<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input type="checkbox" name="vehicle" value="Car" /> I have a car
<br />
<input type="button" name="test" value="test" onclick="testCheckBox();" />

</body>
</html>

Ответы [ 4 ]

3 голосов
/ 06 ноября 2011

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

var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i++) {
  var el = inputs[i];
  if (el.type == 'checkbox' && el.checked) {
    alert(el.value + ' is checked');
  }
}

(Примечание: более новые браузеры поддерживают getElementsByClassName, который также можно использовать.

1 голос
/ 06 ноября 2011

Что вам нужно, это getElementsByName, а не getElementById.

Если вы хотите выбрать по имени тега, это getElementsByTagName. Если вам нужны имена классов, getElementsByClassName (только в новых браузерах). Ты видишь? Поэтому используйте правильный метод в зависимости от того, что вы выбираете.

1 голос
/ 06 ноября 2011

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

function testCheckBox() {
    var bikeCB = document.getElementById('bikeCB');
    var carCB = document.getElementById('carCB');

    if(bikeCB.checked) {
        alert('An item is checked');
    }else if(carCB.checked) {
        alert('An item is checked');
    }else {                              //after all have been checked
        alert('No items are checked');
    }
}

Хотя вам необходимо добавитьИдентификатор для каждого флажка в HTML:

<input type="checkbox" id="bikeCB" value="Bike" /> I have a bike<br />
<input type="checkbox" id="carCB" value="Car" /> I have a car

Если вы хотите выполнить циклическое переключение между флажками, вы можете присвоить своей форме идентификатор и использовать form.elements [] коллекция, чтобы пройти через них и проверить на предмет проверки:

function testCheckBox() {

    var form = document.getElementById('form1');    //get reference to form
    var length = form.elements.length;        //get length of form.elements array

    for(i=0; i<length; i++) {     //loop through while i is less than array length
        if(form.elements[i].checked) {
            alert('An item was checked');
        }
    }
}

Это будет предупреждать для каждого флажка, который отмечен.Если вы просто хотели один раз узнать, были ли какие-либо проверены, вы можете установить для переменной значение true, если они были проверены, а затем проверить, была ли переменная истинной после цикла for, чтобы узнать, предупреждать или нет.
ПоКстати, вы, похоже, пропускаете закрывающий тег </form> в своем html после элементов <input>.

1 голос
/ 06 ноября 2011

Проблема в том, что у вас нет какого-либо элемента с таким идентификатором в вашем HTML.Это семантическая проблема.И поскольку вы используете флажки, я не думаю, что getElementById - это путь.Вы должны либо использовать атрибут класса, либо добавить содержащий элемент для этих флажков, а затем перебрать его дочерние элементы (флажки).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...