how to make user select only one check box in a checkboxlist

Question

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

Answer 1

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

Answer 2

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

Answer 3

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:

<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).attr('checked', '');
            });

            if (checked)
                $(this).attr('checked', 'checked');
        });
    });
</script>

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

Answer 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()");

Answer 5

You might want to have a look at the MutuallyExclusiveCheckBoxExtender.

Answer 6

The groupname attribute was a real life saver!

THanks OP!