how to make user select only one check box in a 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

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

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.

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

use Radio button. The only problem you will face is when you want to de-select the radio button. You can write in a javascript for ‘onClick’ of radio button. The onClick function can check whether radio button is selected, if it is not select it else deselect it.

Hope this helps. See Example

RDJ

Method 2

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:

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

Method 3

Why don’t you use radio buttons, they are ideal for the purpose that you mentioned.

Edit:

If you necessarily want to use checkbox list then assign some logical ids to those checkboxes so that you can access them in JavaScript.
On each onclick event of the checkboxes call the JavaScript and in the JavaScript loop through and see

• If any checkbox is checked other
  than the present clicked checkbox,
  then make them unselected.
• If the present checkbox is already
  checked then just toggle it.

You can see if a checkbox is checked using $("#checkboxId").is(":checked") which returns true if a checkbox is checked.

Thanks

Method 4

this was the code that helped me to solve this issue

just add the script –

var objChkd;

function HandleOnCheck()
{

var chkLst = document.getElementById(‘CheckBoxList1’);
if(objChkd && objChkd.checked)

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

}

and register the client event to the ‘CheckBoxList1’ at the Page_load as

CheckBoxList1.Attributes.Add(“onclick”,”return HandleOnCheck()”);

Method 5

You might want to have a look at the MutuallyExclusiveCheckBoxExtender.

Method 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: Make sure you use the RepeatLayout=”Flow” to get rid of the annoying table format.

Method 7

we can do in java script to get the solution for this.

For this first get the id of the checked item and go thorough the remaining items using loop then unchecked the remaining items

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

Method 8

My jQuery solution for this is coded as follows:

$(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;

            });
        });
    });
}

Method 9

Try this solution:

Code Behind (C#) :

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

Java Script :

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0