Make Checkbox Behave Like Radio Buttons with JavaScript

make checkbox behave like radio buttons with javascript

HTML :

<label><input type="checkbox" name="cb1" class="chb" /> CheckBox1</label>
<label><input type="checkbox" name="cb2" class="chb" /> CheckBox2</label>
<label><input type="checkbox" name="cb3" class="chb" /> CheckBox3</label>
<label><input type="checkbox" name="cb4" class="chb" /> CheckBox4</label>

jQuery :

$(".chb").change(function() {
    $(".chb").prop('checked', false);
    $(this).prop('checked', true);
});

if you want user can unchecked selected item :

$(".chb").change(function() {
    $(".chb").not(this).prop('checked', false);
});

Demo :

http://jsfiddle.net/44Zfv/724/

how do i make checkboxes like radio button

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>

Checkbox behave like radiobox javascript

You can create custom checkboxes with CSS as well) With hidden radio-buttons.

var counter = 0;$('.cb[type="radio"]').each(function( index ){  $(this).attr('name', 'rad-' + counter );  if( index % 2 ) counter++;}); // only auto-naming with JS, for demo.

.block { border: 2px solid orange; margin: 5px; padding: 5px; }
.cb { display: none; }
label {  display: inline-block;  width: 100px;  box-shadow: 1px 1px 3px #666;  padding: 5px; margin: 5px;  cursor: pointer;  user-select: none;}
label:hover { background-color: #fff1ba; }
.box {  display: inline-block;  position: relative;  vertical-align: middle;  width: 16px;  height: 16px;  border: 2px solid #999;  background-color: #ddd;  cursor: pointer;}
.cb:checked ~ .box::after {  content: "";  position: absolute;  top: -2px;  left: 4px;  width: 7px;  height: 13px;  transform: rotate(40deg);  border-right: 2px solid #045acf;  border-bottom: 2px solid #045acf;  }.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block">  <label><input class="cb" type="checkbox"><span class="box"></span> Test</label>  <label><input class="cb" type="radio"><span class="box"></span> Test</label>  <label><input class="cb" type="radio"><span class="box"></span> Test</label></div>
<div class="block">  <label><input class="cb" type="checkbox"><span class="box"></span> Test</label>  <label><input class="cb" type="radio"><span class="box"></span> Test</label>  <label><input class="cb" type="radio"><span class="box"></span> Test</label></div>
<div class="block">  <label><input class="cb" type="checkbox"><span class="box"></span> Test</label>  <label><input class="cb" type="radio"><span class="box"></span> Test</label>  <label><input class="cb" type="radio"><span class="box"></span> Test</label></div>

making checkboxes behave like radio buttons

The essential problem here is that you need to group a set of boxes and then if any one of the set is clicked, iterate through the set, unchecking all except the one that was clicked.

You can group using a class name. Then give each an id.

When the class is clicked, save the id of the clicked one. Then iterate through the checkboxes within the class and uncheck any that have a different id than the one you saved off.

<form action="">
    <input id="cbBike" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Bike" checked>I have a bike<br />
    <input id="cbCar" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Car">I have a car<br />
    <input id="cbBoth" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Both">I have both<br />
    <input id="cbNeither" type="checkbox" class="CB2RBVehicles" name="vehicle" value="Neither">I have neither<br />
</form>

var selectedBox = null;

$(document).ready(function() {
    $(".CB2RBVehicles").click(function() {
        selectedBox = this.id;

        $(".CB2RBVehicles").each(function() {
            if ( this.id == selectedBox )
            {
                this.checked = true;
            }
            else
            {
                this.checked = false;
            };        
        });
    });    
});

Here's an example.

How to change checkboxes to behave like radio button using jquery?

My solution using jQuery:

        $(document).ready(function() {
            $('input').click(function() {
                var input_class = $(this).attr('class');

                $('.'+input_class).prop('checked', false);

                $(this).prop('checked', true);
            });
        });

On every click on a checkbox, all checkboxes with the same class get un-checked before checking the clicked element.

I hope this helps.

Make Checkboxes behave like radio buttons for each table row independently

EDIT: Use siblings() as suggested by @Juan Castillo

When you uncheck the other boxes, limit your search to the siblings (HTML elements that share a direct parent element) of the checkbox that was changed. Also, get rid of
$(".chb").prop('checked', false); and $(this).prop('checked', true); The first line will uncheck every the box every time (not what you want) and the second line means you can't click on a box to uncheck it manually (seems unintentional).

$(".chb").change(function() {  $(this).siblings().prop('checked', false);});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table id="dtBasicExample">  <thead>    <tr>      <th>Aceptation</th>    </tr>  </thead>  <tbody>    <tr>      <td>        <input type='checkbox' class='chb' name='Total' value='Total'>Total<br>        <input type='checkbox' class='chb' name='Parcial' value='Partial'>Partial<br>        <input type='checkbox' class='chb' name='Rechazo' value='Reject'>Reject      </td>    </tr>    <tr>      <td>        <input type='checkbox' class='chb' name='Total' value='Total'>Total<br>        <input type='checkbox' class='chb' name='Parcial' value='Partial'>Partial<br>        <input type='checkbox' class='chb' name='Rechazo' value='Reject'>Reject      </td>    </tr>    <tr>      <td>        <input type='checkbox' class='chb' name='Total' value='Total'>Total<br>        <input type='checkbox' class='chb' name='Parcial' value='Partial'>Partial<br>        <input type='checkbox' class='chb' name='Rechazo' value='Reject'>Reject      </td>    </tr>  </tbody>  <tfoot>  </tfoot></table>

---

Related Topics