如何让用户在的CheckBoxList只选择一个复选框 [英] how to make user select only one check box in a 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.

这篇关于如何让用户在的CheckBoxList只选择一个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！