how to select only one checkbox using jquery?

Question

I am using checkbox in the asp.net gridview. I want select only one checkbox at time. if I select one checkbox other checkboxes should be deselected.

I have html view source

<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl02_ctl02_ctl00_ChkID" type="checkbox" 
<input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl03_ctl02_ctl00_ChkID" type="checkbox"

Do you have 2 checkboxes by row? I agree that a radiobutton is better for this case though. — Claudio Redi
– Claudio Redi, Commented Jun 20, 2012 at 22:35

jfriend00 · Accepted Answer · 2012-06-20 22:46:45Z

Usually radio buttons are used for the exclusive functionality where only one item in a group is selected and the browser will do taht for you automatically with the right HTML.

For checkboxes, you could code it with jQuery like this:

<div class="checkboxContainer">
    <input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl02_ctl02_ctl00_ChkID" type="checkbox"> Item 1<br>
    <input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl03_ctl02_ctl00_ChkID" type="checkbox"> Item 2<br>
    <input id="ctl00_MainContent_mGrid_ob_mGridBodyContainer_ctl04_ctl02_ctl00_ChkID" type="checkbox"> Item 3
</div>

$("input[type='checkbox']").change(function() {
    $(this).closest(".checkboxContainer").find("input[type='checkbox']").not(this).prop("checked", false);
    $(this).prop("checked", true);
});

Working Demo: http://jsfiddle.net/jfriend00/hWEXx/

Here's the pure HTML way of doing exclusive radio buttons (also in that same demo):

<div class="radioGroup">
    <input type="radio" name="group1">Item A<br>
    <input type="radio" name="group1">Item B<br>
    <input type="radio" name="group1">Item C<br>
</div>

David East · Accepted Answer · 2012-06-20 22:36:10Z

3

Use a radio button instead of a checkbox.

<form>
    <input type="radio" name="parents" value="Mom" /> Mom<br />
    <input type="radio" name="parents" value="Dad" /> Dad
</form>

answered Jun 20, 2012 at 22:36

David East

32.7k6 gold badges70 silver badges83 bronze badges

2 Comments

cHao Over a year ago

This is indeed the kind of situation radio buttons were made for. Besides the extra work required to make checkboxes act like you want, radio buttons are more semantically correct -- their very existence is a visual clue that "hey, you can only pick one of these" -- and they'll do the right thing even if for some reason JavaScript is disabled.

David East Over a year ago

Besides radio buttons being the natural fit for the job. You bring up a great point in regard to the possibility of JavaScript being disabled.

Harry89pl · Accepted Answer · 2012-06-21 08:51:05Z

0

in asp.net you should use radiobuttons instead checkboxes (in this case)

<div class="group">
   <asp:RadioButton Id="radio1" runat="server" GroupName="radioGroup" />
   <asp:RadioButton Id="radio2" runat="server" GroupName="radioGroup" />
</div>

GroupName attribute make this functionality you need. (If radio1 is Checked the radio2 is automatically unchecked. hope this help:)

answered Jun 21, 2012 at 8:51

Harry89pl

2,43512 gold badges46 silver badges64 bronze badges

Collectives™ on Stack Overflow

how to select only one checkbox using jquery?

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related