JavaScript:获取复选框值

JavaScript: Get Checkbox Value

本文关键字：复选框 获取 JavaScript      更新时间：2023-09-26

>我正在尝试编写一个javascript函数，当选中第一个复选框"All"时，该函数取消选中所有其他选项。此列表项在 cbxlOption 中的索引为 0，值为 -1，如下所示。如何获取所选复选框的值，以便完成下面的 JavaScript？非常感谢您的帮助！

<asp:CheckboxList ID="cbxlOptions" runat="server" >
    <asp:ListItem Text="All" Value="-1" />
    <asp:ListItem Text="Option 1" Value="0" />
    <asp:ListItem Text="Option 2" Value="1" />
    <asp:ListItem Text="Option 3" Value="2" />
</asp:CheckboxList>

function UncheckOptions( cbxListID, cbxID )
{
  var checkedValue = null; 
  var cbxListID = document.getElementById( cbxListID );
  var cbxArray = cbxListID.getElementsByTagName( 'input' );
  checkedValue = document.getElementById( cbxID ).value;
          //--uncheck everything else other than the first checkbox(index=0)
  if (checkedValue < 0)  
  {
    for (var i=1; cbxArray[i]; ++1)
    {
        cbxArray[i].checked = false;
    } 
  }
  else                     //--checkedvalue > 0, uncheck "ALL" 
  {
  cbxArray[0].checked = false;
  }
}

这不是确切的代码（因为我是用 asp.net 编码的），但希望这有所帮助。http://jsbin.com/utuvuy/20/

我正在将 JavaScript 函数添加到每个复选框中，如下所示： 

For Each item As ListItem In cbxlOptions.Items
            item.Attributes.Add("onclick", "UncheckOptions('" & _
                             cbxlStatus.ClientID.ToString & "',this.id);")
Next

由于您只对单击"全部"以取消选中所有其他复选框感兴趣，因此您只需要将函数应用于该特定复选框。您可以在JS中执行此操作，而无需将其嵌入到HTML中。此外，对于复选框，您希望onchange而不是onclick 。

试一试：

JSBin

var all = document.getElementById('cbx0');
all.onchange = function() {
    if(this.checked) {
        UncheckOptions(cbx0);
    }
};
function UncheckOptions(id)
{
    var cbxListID = document.getElementById(id);
    var cbxArray = document.getElementsByTagName( 'input' );
  //--uncheck everything else other than the first checkbox(index=0)
    for(var i=1; i < cbxArray.length; i++) {
        cbxArray[i].checked = false;
    }
}

给定您的 HTML，在您的复选框中添加一个类（我使用了类 cb ）（而不是全部检查）。在内联更改处理程序中，将this作为参数传递给函数，并使用以下 JS：

function doAll(obj) {
    var cb = document.getElementsByClassName("cb");
    for (var i = 0; i < cb.length; i++) {
        cb[i].checked = obj.checked;
    }
}

.HTML

<input type="checkbox" id="cbx0" value="-1" onclick="doAll(this)">All

演示：http://jsfiddle.net/tymeJV/FAbZG/

相关文章：