Question

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

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

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

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

Answer 1

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

希望这会有所帮助。 See Example

RDJ

Answer 2

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

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：

    <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>

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

Answer 3

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

修改

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

如果选中其他任何复选框比当前点击的复选框，然后让它们取消选择。

如果当前复选框已经存在检查然后切换它。

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

由于

Answer 4

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

只需添加脚本 -

var objChkd;

函数HandleOnCheck（） {

var chkLst = document.getElementById（'CheckBoxList1'）; if（objChkd＆amp;＆amp; objChkd.checked）

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

}

并将客户端事件注册到Page_load上的'CheckBoxList1'

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

Answer 5

您可能需要查看MutuallyExclusiveCheckBoxExtender。

Answer 6

的.aspx

<asp:CheckBoxList id="chkList" runat="server" RepeatLayout="Flow" />

的.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

我的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 8

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

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

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

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);
    }
}

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

9 个答案: