使用javascript修改子元素

您好，我有下面的HTML代码，在一个切换复选框上，我启动了这个javascript函数，它应该检查所有的复选框。脚本工作不正常。这里是小提琴

HTML

检查1

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

功能切换（源代码）{
Checkbox=document.getElementsByClassName（'Checkbox'）；
警报（复选框。长度）；
对于（变量i=0，n=checkbox.length；i

---

}

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

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

那是

<TextNode textContent="\n\n">

---

差不多。您需要使用子节点的索引1，而不是0
否则，您需要删除两个标记之间的空白

window.toggle=函数切换（源代码）{
Checkbox=document.getElementsByClassName（'Checkbox'）；
//警报（复选框。长度）；
对于（变量i=0，n=checkbox.length；i

此外，如果您有许多复选框：
我将反转选择，而不是选择全部，如

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

功能反转复选框选择（e）
{
e=e | |事件；/*获取IE事件（未通过）*/
e、 StopRopAgation？e.StopRopAgation（）：e.cancelBubble=true；
var strFormId=“form1”；
var strCheckBoxId=“cbInvertSelection”；
var ControlCheckbox=document.getElementById（strCheckBoxId）；
ControlCheckbox.disabled=true；
var form=document.getElementById（strFormId）；
对于（var i=0；i

为什么不使用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";
    }

});

$（“输入”）。单击（函数（）{
var复选框=$（'.Checkbox'）.children（）；
console.log（复选框.长度）；
对于（变量i=0；i

---

查看此处的工作小提琴：

不将类放在复选框上启动的原因？如果要设置小提琴，请确保它运行。JavaScript错误<代码>语法错误：函数体后缺少}http://fiddle.jshell.net/eBFwq/show/ 第27行脚本在加载时运行。嘿，ASP.Net复选框正在生成HTML，调试将告诉您原因

console.log（复选框[i].childNodes[0]）

这不是复选框…我得到这行的javascript错误checkbox=document.getElementsByClassName（'checkbox'）。。对象不支持此属性或方法..这对我来说没什么问题：旧的IE版本不支持

GetElementsByCassName

。这是你的问题吗？。您需要使用polyfill@user505210:为了让我的脚本正常工作，您需要在项目中引用jquery.js。如果它不起作用，那是因为你没有js，否则小提琴会按预期工作。当我选中“全选”复选框时，它会选中下面的复选框，但当我取消选中它时，什么也不会发生。它也应该取消选中其他复选框。。

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

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

});