Изменения дочерних элементов с помощью JavaScript

Question

Привета У меня есть ниже HTML-код и на Тумблер флажке я огнь это яваскрипт функции, которая, как предполагается, чтобы проверить весь скрипт checkboxes.The не работает должным образом .Йся это скрипка http://jsfiddle.net/eBFwq/

HTML

<SPAN class="Checkbox"> 

<INPUT id="ctl00_PlaceHolderMain_Chk_1" CHECKED="check" type="checkbox" name="ctl00$PlaceHolderMain$Chk_1"> 

<LABEL for="ctl00_PlaceHolderMain_Chk_1">Check 1</LABEL> 

</SPAN> 

Javascript

function toggle(source) { 
    checkboxes = document.getElementsByClassName('Checkbox'); 
    alert(checkboxes.length); 
    for (var i = 0, n = checkboxes.length; i < n; i++) { 
     checkboxes[i].childNodes[0].checked = source.checked; 
    } 

}

Answer 1

Практически. Вам нужно использовать индекс 1 дочернихNodes, а не 0.
В противном случае вам нужно удалить пробел между двумя тегами.

http://jsfiddle.net/H9mc2/

window.toggle = function toggle(source) { 

      checkboxes = document.getElementsByClassName('Checkbox'); 
      // alert(checkboxes.length); 
      for (var i = 0, n = checkboxes.length; i < n; i++) { 
       checkboxes[i].childNodes[1].checked = source.checked; 
      } 

} 

Кроме того, если у вас есть много флажков:
вместо выбора всех, я бы инвертировать выделение, как

function invertCheckboxSelection(e) 
    { 
     e = e || event; /* get IE event (not passed) */ 
     e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true; 

     var strFormId = "form1"; 
     var strCheckBoxId = "cbInvertSelection"; 


     var ControlCheckbox = document.getElementById(strCheckBoxId); 
     ControlCheckbox.disabled = true; 

     var form = document.getElementById(strFormId); 

     for (var i = 0; i < form.elements.length; i++) 
     { 

      if (form.elements[i].type == 'checkbox') 
      { 
       if (form.elements[i].id != strCheckBoxId) 
        form.elements[i].checked = !form.elements[i].checked; 

      } // End if (form.elements[i].type == 'checkbox') 

     } // Next i 

     ControlCheckbox.disabled = false; 
    } // End Function invertCheckboxSelection 

Answer 2

Проблема заключается в том, что первый childnode не является флажком. Существует текстовыйNode.

console.log(checkboxes[i].childNodes[0]); 

который

<TextNode textContent="\n\n"> 

Поскольку вы сказали, что генерируется код, который Вы должны использовать getElementByTagName() вместо того, чтобы полагаться на определенном порядке ChildNodes.

checkboxes[i].getElementsByTagName("input")[0].checked = source.checked; 

Answer 3

Почему бы не использовать JQuery? Я знаю, что вы не выбрали jquery как тег в вопросе, но подумайте об этом. Это облегчит вам поиск дочерних узлов. Я пошел путь Jquery и приготовил что-то вроде этого:

$("input").click(function(){ 
    var checkboxes = $('.Checkbox').children(); 
    console.log(checkboxes.length); 
    for (var i = 0; i < checkboxes.length; i++) { 
     checkboxes[i].checked = "checked"; 
    } 

}); 

Посмотреть рабочую скрипку здесь: http://jsfiddle.net/bbweR/2/