-1

您好，我有下面的 HTML 代码，在切换复选框上我触发了这个 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;
    }

}

4

3 回答 3

1

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

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

这是

<TextNode textContent="\n\n">

既然你说它是生成代码，你应该使用getElementByTagName()而不是依赖childNodes的特定顺序。

checkboxes[i].getElementsByTagName("input")[0].checked = source.checked;
于 2013-10-03T13:03:28.283 回答
1

Almost. You need to use index 1 of childNodes, not 0.
Otherwise, you need to remove the whitespace between the two tags.

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;
            }

}

Also, if you have many checkboxes:
instead of selecting all, I would invert the selection, like

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
于 2013-10-03T13:18:01.897 回答
0

为什么不使用 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/

于 2013-10-03T13:24:28.747 回答