如何使用户只在复选框列表中选中一个复选框

我有一个复选框清单（下面有6个项目）。 我有一个搜索按钮。 如果用户单击“搜索”按钮，则会获得所有结果。 我使用.cs文件中的数据库绑定checkboxlist的项目

condition1：但是现在如果用户选择了一个复选框[item1]，它会被选中，并且他会尝试选择一个2复选框[item2]，然后第一个选中复选框[item1]应该被取消选中。 只应选中复选框[item2]

条件2：现在如果用户选择了checkbox1 [item1]，它将被选中。 现在，如果用户再次点击checkbox [item1]，则应取消选择。

你可以在javascript或JQuery中为我提供解决方案，任何帮助都会很棒。 期待一个解决方案，谢谢你

Answer 1

虽然我绝对同意单选按钮是你所描述的用例的方法，但这里有一点点jquery会导致复选框表现得像单选按钮。 您只需在复选框标记中添加“groupname”属性即可。

HTML：

 
Group 1 - radio button behavior
  Checkbox 1
  Checkbox 2
  Checkbox 3
  Checkbox 4
  Checkbox 5
 
 
 
Group 2 - radio button behavior
  Checkbox 1
  Checkbox 2
  Checkbox 3
  Checkbox 4
  Checkbox 5
 
 
 
Group 3 normal checkbox behavior
  Checkbox 1
  Checkbox 2
  Checkbox 3
  Checkbox 4
  Checkbox 5
  

使用Javascript：

我确信有机会增加简洁性和性能，但这应该让你开始。

Answer 2

使用单选按钮。 您将面临的唯一问题是您要取消选择单选按钮。 您可以使用javascript编写“onClick”单选按钮。 onClick函数可以检查是否选中了单选按钮，如果没有选中它，则取消选择它。

希望这可以帮助。 见例子

RDJ

Answer 3

为什么不使用单选按钮，它们非常适合您提到的目的。

编辑：

如果您一定要使用复选框列表，则为这些复选框分配一些逻辑ID，以便您可以在JavaScript中访问它们。 在复选框的每个onclick事件上调用JavaScript并在JavaScript循环中查看

• 如果选中任何复选框而不是当前单击的复选框，则取消选中它们。
• 如果已经选中了当前复选框，则只需切换它。

您可以看到是否使用$("#checkboxId").is(":checked")如果选中复选框则返回true。

谢谢

Answer 4

这是帮助我解决这个问题的代码

只需添加脚本 –

var objChkd;

function HandleOnCheck（）{

var chkLst = document.getElementById（’CheckBoxList1’）; if（objChkd && objChkd.checked）

  objChkd.checked=false;objChkd = event.srcElement; 

}

并将客户端事件注册到Page_load的’CheckBoxList1′

CheckBoxList1.Attributes.Add（“onclick”，“return HandleOnCheck（）”）;

Answer 5

您可能想要查看MutuallyExclusiveCheckBoxExtender 。

Answer 6

的.aspx

.js文件

 $(document).ready(function () { LimitCheckboxes('input[name*=chkList]', 3); } function LimitCheckboxes(control, max) { $(control).live('click', function () { //Count the Total Selection in CheckBoxList var totCount = 1; $(this).siblings().each(function () { if ($(this).attr("checked")) { totCount++; } }); //if number of selected item is greater than the max, dont select. if (totCount > max) { return false; } return true; }); } 

PS：确保使用RepeatLayout =“Flow”来摆脱恼人的表格格式。

Answer 7

我们可以在java脚本中为此获得解决方案。

为此，首先获取已检查项目的ID并使用循环彻底删除其余项目，然后取消选中其余项目

http://csharpektroncmssql.blogspot.com/2011/11/uncheck-check-box-if-another-check-box.html

Answer 8

我的jQuery解决方案编码如下：

 $(document).ready(function () { SetCheckboxListSingle('cblFaxTypes'); }); function SetCheckboxListSingle(cblId) { $('#' + cblId).find('input[type="checkbox"]').each(function () { $(this).bind('click', function () { var clickedCbxId = $(this).attr('id'); $('#cblFaxTypes').find('input[type="checkbox"]').each(function () { if (clickedCbxId == $(this).attr('id')) return true; // do not use JQuery to uncheck the here because it breaks'defaultChecked'property // http://bugs.jquery.com/ticket/10357 document.getElementById($(this).attr('id')).checked = false; }); }); }); } 

Answer 9

试试这个解决方案

代码背后（C＃）：

 foreach (ListItem listItem in checkBoxList.Items) { listItem.Attributes.Add("onclick", "makeSelection(this);"); } 

Java脚本：

 function makeSelection(checkBox) { var checkBoxList = checkBox; while (checkBoxList.parentElement.tagName.toLowerCase() != "table") { checkBoxList = checkBoxList.parentElement; } var aField = checkBoxList.getElementsByTagName("input"); var bChecked = checkBox.checked; for (i = 0; i < aField.length; i++) { aField[i].checked = (aField[i].id == checkBox.id && bChecked); } }