Question

你好我有下面的HTML代码，并在一个Toggle复选框上我启动了这个javascript函数，它应该检查所有的复选框。脚本不能正常工作。这是小提琴 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

这里的问题是第一个子节点不是复选框。有一个textNode。

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

是

<TextNode textContent="\n\n">

由于您说它是生成代码，因此您应该使用getElementByTagName()而不是依赖于childNodes的特定顺序。

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

Answer 2

几乎。您需要使用childNodes的索引1，而不是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 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/

使用javascript修改子元素

3 个答案: