how do i make checkboxes like radio button

Question

I'm having difficulty using jQuery to make the checkboxes act like radio so I can only check one of the three checkboxes

<legend>Choose your delivery option!</legend>
<label>
    <input type="checkbox" id="delivery" name="delivery" value="standard" />
    Standard Delivery
</label>
<label>
    <input type="checkbox" id="delivery" name="delivery" value="2day" />
    2 Day Shipping
</label>
<label>    
    <input type="checkbox" id="delivery" name="delivery" value="overnite" />
    Overnight Shipping
</label>

If you want radio button behaviour, use radio buttons. There's no point hacking this around in JS when you already get the behaviour you want for free in HTML. — Rory McCrossan, Jun 18 '15 at 07:02
@DAPZ Well if that teacher tells you to use JS to change a checkbox to a radio button instead of just doing what I did in my answer, he can't be a too good teacher... — Gustaf Gunér, Jun 18 '15 at 07:08
I understand that you can use the radio type for the input but he's making us use jquery to make checkboxes act like radio for some reason. Here's the assignment if you interested: Write a JQuery mobile page that controls delivery option. A user can choose one of delivery options(Standard, 2day shipping, and overnight). A user can choose only one options. Implement with checkboxes we studied in the class. Once a user choose one option, then the others should be unchecked. For example, a user checked "2Day shipping" as his/her option, all the other options should not be checked. — DAPZ, Jun 18 '15 at 07:16
Did you teacher tell you to use duplicate IDs too? If he doesn't like standart, use that: http://jsfiddle.net/hv9er8fb/ http://caniuse.com/#feat=css-appearance — A. Wolff, Jun 18 '15 at 07:25
@DAPZ I have now added what you (or your teacher) are looking for. Check my answer — Gustaf Gunér, Jun 18 '15 at 07:32
for some reason when i used your code, it still doesn't work — DAPZ, Jun 18 '15 at 07:46
Yes I did, but the issue seems to arise when I added the jquery mobile style css or this — DAPZ, Jun 18 '15 at 19:36
@Gustaf Hey I just wanted to tell that I have fixed the issue with my code and thank you so much for helping me your code was a huge help — DAPZ, Jun 19 '15 at 08:18
Possible duplicate of [jQuery: make checkboxes act like radio buttons?](http://stackoverflow.com/questions/4697941/jquery-make-checkboxes-act-like-radio-buttons) — T J, May 23 '16 at 07:48

Gustaf Gunér · Accepted Answer · 2015-06-18T07:32:08.013

Then you use the "radio" attribute. type="radio"

And by the way, don't use multiple elements with the same id.

Here's how you should do it:

<legend>Choose your delivery option!</legend>
                <label><input type="radio" id="delivery" name="delivery" value="standard" />Standard Delivery</label>
                <label><input type="radio" id="delivery" name="delivery" value="2day" />2 Day Shipping</label>
                <label><input type="radio" id="delivery" name="delivery" value="overnite" />Overnight Shipping</label>

But if you want to complete your assignment, you can do the following:

$('.checkbox').click(function(){
    $('.checkbox').each(function(){
        $(this).prop('checked', false); 
    }); 
    $(this).prop('checked', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<legend>Choose your delivery option!</legend>
                <label><input type="checkbox" id="delivery" class="checkbox" name="delivery" value="standard" />Standard Delivery</label>
                <label><input type="checkbox" id="delivery" class="checkbox" name="delivery" value="2day" />2 Day Shipping</label>
                <label><input type="checkbox" id="delivery" class="checkbox" name="delivery" value="overnite" />Overnight Shipping</label>

You have duplicate ids too, you should change them. As a matter of fact, you don't need ids at all — chiapa, Jun 18 '15 at 11:40
Haha, @chiapa I don't have them, or well I do, but just copied his code and added classes... — Gustaf Gunér, Jun 18 '15 at 11:50

Arathi Sreekumar · Answer 2 · 2015-06-18T11:37:04.120

There is a completely css and html only solution, if its just the display part that you are concerned about. You still use radio buttons, but modify their display to custom display.

Here is an example:

<input type="radio" name="delivery" id="standard" value="standard" class="delivery-option"/><label for="standard" class="delivery-label"> Standard </label>
<input type="radio" name="delivery" id="today" value="today" class="delivery-option"/><label for="today" class="delivery-label"> Today </label>
<input type="radio" name="delivery" id="overnight" value="overnight" class="delivery-option"/><label for="overnight" class="delivery-label"> Overnight </label>

CSS:

.delivery-label {
    display: block;
    padding-left: 30px;
    position: relative;
}

.delivery-label:before {
    position: absolute;
    width: 15px;
    height: 15px;
    content: '';
    border: 1px solid black;
    left: 0;
}

.delivery-option:checked + .delivery-label:before {
    content: 'x';
    line-height: 15px;
    text-align: center;
}

.delivery-option {
    position: absolute;
    margin-left: -1000px;
}

Please note that the important part here is that the labels have a 'for' attribute connecting it to 'id' of the corresponding input field. This is the right way to write semantically correct html.

When you do this, clicking on the label is same as clicking on the input field. Thats the trick to get this working.

Also not duplicating ids is necessary for this. Duplicate ids is semantically incorrect HTML and also would break such default html functions.

Here is the working jsfiddle: https://jsfiddle.net/bacuxng7/1/

score 1 · Answer 3 · answered Jul 14 '16 at 15:45

Html

<input type="checkbox" name="a" value="a">A
<input type="checkbox" name="b" value="b">B
<input type="checkbox" name="c" value="c">c
<input type="checkbox" name="d" value="d">D

try this jQuery code:

$('input[type="checkbox"]').on('change',function(){
  $('input[type="checkbox"]').each(function(){
    $(this).prop('checked', false);
  });
  $(this).prop('checked', true);
 alert($(this).val());
});

here is fiddle

score 0 · Answer 4 · answered Jun 18 '15 at 07:16

You should definitely use radio buttons here. And correct your teacher, because this is not something a real developer would do.

But if he insists, take a look at the onchange events:

$(document).on('change', 'input[name=delivery]', function() {
    //Something with $(this).siblings() ;-)
});

Oh, and don't use the same id multiple times, as @Gustaf already pointed out.

how do i make checkboxes like radio button

4 Answers4