JavaScript：获取复选框值答案

【问题标题】：JavaScript: Get Checkbox ValueJavaScript：获取复选框值
【发布时间】：2013-09-19 02:32:28
【问题描述】：

我正在尝试编写一个 javascript 函数，当第一个复选框“全部”被选中时，取消选中所有其他选项。该列表项在 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

【问题讨论】：

请在jsfiddle中分享浏览器生成的html，以便我们提供解决方案。
希望有帮助。谢谢你。 jsbin.com/utuvuy/20

标签： javascript asp.net checkbox

【解决方案1】：

由于您只对单击“全部”以取消选中所有其他选项感兴趣，因此您只需将您的功能应用于该特定复选框。您可以在 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;
    }
}

【讨论】：

【解决方案2】：

给定您的 HTML，在您的复选框中添加一个类（我使用了 cb 类）（不是 Check All 一个）。在您的内联更改处理程序中，将 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/

【讨论】：

谢谢！将查看演示。