如何让用户在的CheckBoxList只选择一个复选框

本文介绍了如何让用户在的CheckBoxList只选择一个复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有（在这6项）的检查boxlist。和我有一个搜索按钮。如果用户点击搜索按钮，它得到的所有结果。 我在cs文件使用数据库绑定的物品的CheckBoxList

i have an check boxlist with (6 items under it). and i have an search button. if user clicks Search button it gets all the result. i am binding the items for checkboxlist using database in .cs file

条件1：但现在，如果用户选择一个复选框[ITEM1]它被选中 他试图选择一个2复选框[ITEM2]，然后firstselected复选框[ITEM1]应该取消选择。只有复选框[ITEM2]应选

condition1: but now if user selects a checkbox[item1] its gets selected and he tries to select an 2 checkbox[item2] then firstselected checkbox[item1] should be unselected. only checkbox[item2] should be selected

条件2：现在，如果用户为选中checkbox1 [ITEM1]它被选中。现在如果用户在checkboxi再次单击[ITEM1]那么它应该得到取消。

condition 2: now if user as selected checkbox1 [item1] it gets selected. and now if user again clicks on checkboxi[item1] then it should get deselected.

不是你能提​​供给我的JavaScript或JQuery的解决方案 任何帮助将是巨大的。期待一个解决方案 谢谢

either you can provide me the solution in javascript or JQuery any help would be great . looking forward for an solution thank you

推荐答案

虽然我绝对的一致同意，单选按钮去为你描述的用例的方式，这里是jQuery的，这将导致复选框有点文档片断表现得像单选按钮。你只需要一个组名属性添加到您的复选框标记。

While I definitely agree with the consensus that radio buttons are the way to go for your described use-case, here is a little snipped of jquery that will cause checkboxes to behave like radio buttons. You simply need to add a "groupname" attribute to your checkbox tag.

HTML

<fieldset> <legend>Group 1 - radio button behavior</legend> <input type="checkbox" groupname="group1" value="1" /> Checkbox 1<br /> <input type="checkbox" groupname="group1" value="2" /> Checkbox 2<br /> <input type="checkbox" groupname="group1" value="3" /> Checkbox 3<br /> <input type="checkbox" groupname="group1" value="4" /> Checkbox 4<br /> <input type="checkbox" groupname="group1" value="5" /> Checkbox 5<br /> </fieldset> <fieldset> <legend>Group 2 - radio button behavior</legend> <input type="checkbox" groupname="group2" value="1" /> Checkbox 1<br /> <input type="checkbox" groupname="group2" value="2" /> Checkbox 2<br /> <input type="checkbox" groupname="group2" value="3" /> Checkbox 3<br /> <input type="checkbox" groupname="group2" value="4" /> Checkbox 4<br /> <input type="checkbox" groupname="group2" value="5" /> Checkbox 5<br /> </fieldset> <fieldset> <legend>Group 3 normal checkbox behavior</legend> <input type="checkbox" value="1" /> Checkbox 1<br /> <input type="checkbox" value="2" /> Checkbox 2<br /> <input type="checkbox" value="3" /> Checkbox 3<br /> <input type="checkbox" value="4" /> Checkbox 4<br /> <input type="checkbox" value="5" /> Checkbox 5<br /> </fieldset>

使用Javascript：

Javascript:

<script type="text/javascript"> $(document).ready(function() { $('input[type=checkbox]').click(function() { var groupName = $(this).attr('groupname'); if (!groupName) return; var checked = $(this).is(':checked'); $("input[groupname='" + groupName + "']:checked").each(function() { $(this).prop('checked', ''); }); if (checked) $(this).prop('checked', 'checked'); }); }); </script>

我敢肯定有机会提高简洁和性能，但这应该让你开始。

I'm sure there are opportunities to increase brevity and performance, but this should get you started.