使用 JavaScript 的 CheckBoxList 项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5821993/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CheckBoxList Items using JavaScript
提问by VoltaicShock
I have a checkoxlist with a couple of items and an all option. The user can select all and I want this to check off all the options and if they uncheck all it will uncheck all options.
我有一个包含几个项目和一个所有选项的 checkoxlist。用户可以全选，我希望它选中所有选项，如果他们取消选中所有选项，它将取消选中所有选项。
I have accomplished this with the following code.
我已使用以下代码完成此操作。
<script language="javascript" type="text/javascript">
function CheckBoxListSelect(cbControl) //, state)
{
var chkBoxList = document.getElementById(cbControl);
var chkBoxCount= chkBoxList.getElementsByTagName("input");
alert(chkBoxCount[0].checked);
for(var i=0;i<chkBoxCount.length;i++)
{
chkBoxCount[i].checked = chkBoxCount[0].checked //state;
}
return false;
}
</script>
cblAffiliation.Attributes.Add("onclick", "javascript: CheckBoxListSelect ('" & cblAffiliation.ClientID & "');")
The issue is that if I select any of the boxes it loops through and then sets them to whatever the all option is. I am having trouble figuring out the best way to get around this.
问题是，如果我选择它循环的任何一个框，然后将它们设置为所有选项。我无法找出解决此问题的最佳方法。
I want to avoid using a checkbox next to the checkboxlist, then I have to make that line up with the checkboxlist.
我想避免使用复选框列表旁边的复选框，然后我必须将该复选框与复选框列表对齐。
回答by Bob Fincheimer
Simply check to see if the box clicked was the all option. If it was, then go ahead and change the rest of the boxes. If it isn't, then check all the options to see if they are all checked so you can update the 'All' checkbox.
只需检查单击的框是否是全部选项。如果是，请继续更改其余的框。如果不是，则检查所有选项以查看它们是否都被选中，以便您可以更新“全部”复选框。
EDIT
编辑
You might want to use onChange, instead of onClick, onClick will probably be called before the value on the given checkbox is changed.
您可能想要使用 onChange 而不是 onClick，onClick 可能会在给定复选框上的值更改之前被调用。
Code not checked, please forgive syntax problems.
代码未检查，请原谅语法问题。
<script language="javascript" type="text/javascript">
function CheckBoxListSelect(cbControl) //, state)
{
var chkBoxList = document.getElementById(cbControl);
var chkBoxCount= chkBoxList.getElementsByTagName("input");
var clicked = this;
alert(chkBoxCount[0].checked ? 'All is Checked' : 'All is not Checked');
alert(clicked == chkBoxCount[0] ? 'You Clicked All' : 'You Didn't click All');
var AllChecked = true; // Check the all box if all the options are now checked
for(var i = 1;i < chkBoxCount.length; i++)
{
if(clicked == chkBoxCount[0]) { // Was the 'All' checkbox clicked?
chkBoxCount[i].checked = chkBoxCount[0].checked; // Set if so
}
AllChecked &= chkBoxCount[i].checked; // AllChecked is anded with the current box
}
chkBoxCount[0].checked = AllChecked;
return false;
}
</script>
cblAffiliation.Attributes.Add("onchange", "javascript: CheckBoxListSelect ('" & cblAffiliation.ClientID & "');")
回答by Ruchi Jain
<asp:CheckBox ID="checkAll" runat="server" Text="Select/Unselect" onclick="CheckAll();" />
<asp:CheckBoxList ID="chkTest" runat="server" onclick="ClearAll();">
<asp:ListItem Text="Test 1" Value="0"></asp:ListItem>
<asp:ListItem Text="Test 2" Value="1"></asp:ListItem>
<asp:ListItem Text="Test 3" Value="2"></asp:ListItem>
</asp:CheckBoxList>
<script type="text/javascript">
function CheckAll() {
var intIndex = 0;
var rowCount=document.getElementById('chkTest').getElementsByTagName("input").length;
for (intIndex = 0; intIndex < rowCount; intIndex++)
{
if (document.getElementById('checkAll').checked == true)
{
if (document.getElementById("chkTest" + "_" + intIndex))
{
if (document.getElementById("chkTest" + "_" + intIndex).disabled != true)
document.getElementById("chkTest" + "_" + intIndex).checked = true;
}
}
else
{
if (document.getElementById("chkTest" + "_" + intIndex))
{
if (document.getElementById("chkTest" + "_" + intIndex).disabled != true)
document.getElementById("chkTest" + "_" + intIndex).checked = false;
}
}
}
}
function ClearAll(){
var intIndex = 0;
var flag = 0;
var rowCount=document.getElementById('chkTest').getElementsByTagName("input").length;
for (intIndex = 0; intIndex < rowCount; intIndex++)
{
if (document.getElementById("chkTest" + "_" + intIndex))
{
if(document.getElementById("chkTest" + "_" + intIndex).checked == true)
{
flag=1;
}
else
{
flag=0;
break;
}
}
}
if(flag==0)
document.getElementById('checkAll').checked = false;
else
document.getElementById('checkAll').checked = true;
}
</script>
回答by Prince Antony G
I think this code will help you.
我认为这段代码会对你有所帮助。
<script type="text/javascript">
function check(checkbox)
{
var cbl = document.getElementById('<%=CheckBoxList2.ClientID %>').getElementsByTagName("input");
for(i = 0; i < cbl.length;i++) cbl[i].checked = checkbox.checked;
}
</script>
<asp:CheckBox ID="CheckBox1" runat="server" onclick="check(this)" />
<asp:CheckBoxList ID="CheckBoxList2" runat="server">
<asp:ListItem>C1</asp:ListItem>
<asp:ListItem>C2</asp:ListItem>
</asp:CheckBoxList>
回答by Gurindapalli
function checkparent(id) {
var parentid = id;
var Control = document.getElementById(parentid).getElementsByTagName("input");
if (parentid.indexOf("List") != -1) {
parentid = parentid.replace("List", "");
}
if (eval(Control).length > 0) {
if (eval(Control)) {
for (var i = 0; i < Control.length; i++) {
checkParent = false;
if (Control[i].checked == true) {
checkChild = true;
}
else {
checkChild = false;
break;
}
}
}
}
if (checkParent == true && document.getElementById(parentid).checked == false) {
document.getElementById(parentid).checked = false;
checkParent = true;
}
else if (checkParent == true && document.getElementById(parentid).checked == true) {
document.getElementById(parentid).checked = true;
checkParent = true;
}
if (checkChild == true && checkParent == false) {
document.getElementById(parentid).checked = true;
checkParent = true;
}
else if (checkChild == false && checkParent == false) {
document.getElementById(parentid).checked = false;
checkParent = true;
}
}
function CheckDynamic(chkid) {
id = chkid.id;
var chk = $("#" + id + ":checked").length;
var child = id + "List";
if (chk != 0) {
$("[id*=" + child + "] input").attr("checked", "checked");
}
else {
$("[id*=" + child + "] input").removeAttr("checked");
}
checkparent(id);
}
