DAPZ DAPZ - 4 months ago 9
jQuery Question

how do i make checkboxes like radio button

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>

Answer

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>