JavaScript检查复选框是否被选中或取消选中

Question

我有一个 JavaScript 函数，它在一组复选框上执行操作，但是最终的操作是根据用户是勾选还是取消勾选设置被点击的复选框为选中或未选中状态。

不幸的是，每次检查是否被选中或未选中时，它都返回 "on"，表明用户总是选中复选框！任何帮助将不胜感激，以下是 JavaScript 代码。

// Uncheck all the checkboxs with the same Tax Credit
for (i=0; i<arrChecks.length; i++)
{
    var attribute = arrChecks[i].getAttribute("xid")
    if (attribute == elementName)
    {
        // if the current state is checked, unchecked and vice-versa
        if (arrChecks[i].value == "on")   // <-- This is always returning true, even if the box is being unchecked
        {
            arrChecks[i].checked = 1;
        } else {
            arrChecks[i].checked = 0;
        }

    } else {
        arrChecks[i].checked = 0;
    }
} 

- Mark K.

---

在HTML中检查复选框的正确方法是checked="checked"。 - Georg Schölly

你有没有考虑过像jQuery、Prototype、Moo或YUI这样的库？它们可以让这个过程变得更容易一些。 - Chris S

Answer 1

你应该评估复选框元素的checked属性。

for (i=0; i<arrChecks.length; i++)
{
    var attribute = arrChecks[i].getAttribute("xid")
    if (attribute == elementName)
    {
        // if the current state is checked, unchecked and vice-versa
        if (arrChecks[i].checked)
        {
            arrChecks[i].checked = false;
        } else {
            arrChecks[i].checked = true;
        }

    } else {
        arrChecks[i].checked = false;
    }
}

- steve_c

---

我正在处理其他项目，当你使用代码 if (arrChecks[i].checked) 时，这段代码完美地运行。 - Me 4U

Answer 2

value属性是通过以下方式设置的checkbox的值：

<input type='checkbox' name='test' value='1'>

当有人勾选了那个框框，服务器会收到一个名为test、value为1的变量 - 你需要检查的不是它的value（无论是否勾选都不会改变），而是复选框的checked状态。

所以，如果你替换这段代码：

if (arrChecks[i].value == "on") 
{
    arrChecks[i].checked = 1;
} else {
    arrChecks[i].checked = 0;
}

使用以下代码：

arrChecks[i].checked = !arrChecks[i].checked;

它应该可以工作。对于这个问题，你应该使用 true 和 false 而不是 0 和 1。

- Paolo Bergantino

---

所以代码将变成："if (arrChecks[i].checked) arrChecks[i].checked = 1;"。这也不对。 - Crescent Fresh

好的，没问题。我没有看逻辑那里。已经修复了。 - Paolo Bergantino

Answer 3

要切换复选框，您可以使用

element.checked = !element.checked;

所以你可以使用。

if (attribute == elementName)
{
    arrChecks[i].checked = !arrChecks[i].checked;
} else {
    arrChecks[i].checked = false;
}

- meouw

Answer 4

function enter_comment(super_id) {
    if (!(document.getElementById(super_id).checked)) {
        alert('selected checkbox is unchecked now')
    } else {
        alert('selected checkbox is checked now');
    }
}

这是两个复选框，它们的功能相同，都可以在点击后调用enter_comment函数并传递value值。

- shanti gola

Answer 5

function CHeck(){
    var ChkBox = document.getElementById("CheckBox1");
    alert(ChkBox.Checked);
}

<asp:CheckBox ID="CheckBox1" runat="server" onclick="CHeck()" />

- Suresh

---

"-1" 应该是 ChkBox.checked，因为它区分大小写。在我意识到错误之前，我花了大约 20 分钟尝试让你的示例工作！ - Eyad

Answer 6

同时确保在Firefox和IE中都进行测试。JS操作的复选框存在一些讨厌的错误。

- Spikolynn

Answer 7

我不确定问题出在哪里，但我相信这个方法可以解决它。

for (i=0; i<arrChecks.length; i++)
    {
        var attribute = arrChecks[i].getAttribute("xid")
        if (attribute == elementName)
        {
            if (arrChecks[i].checked == 0)  
            {
                arrChecks[i].checked = 1;
            } else {
                arrChecks[i].checked = 0;
            }

        } else {
            arrChecks[i].checked = 0;
        }
    }

- ForYourOwnGood