make checkbox behave like radio buttons with javascript

Question

I need to manipulate the behavior of the check boxes with javascript. They should basically behave like radio buttons (only one selectable at a time, plus unselect any previ

Answer 1

There are many ways to do this. This is a clickhandler (plain js) for a div containing a number of checkboxes:

function cbclick(e){
   e = e || event;
   var cb = e.srcElement || e.target;
   if (cb.type !== 'checkbox') {return true;}
   var cbxs = document.getElementById('radiocb')
               .getElementsByTagName('input'), 
       i    = cbxs.length;
    while(i--) {
        if (cbxs[i].type 
             && cbxs[i].type == 'checkbox' 
             && cbxs[i].id !== cb.id) {
          cbxs[i].checked = false;
        }
    }
}

Here's a working example.

Answer 2

try this

<form id="form" action="#">
            <input name="checkbox1" type="checkbox" />
            <input name="checkbox2" type="checkbox" />
            <input name="checkbox3" type="checkbox" />
            <input name="checkbox4" type="checkbox" />
            <input name="checkbox5" type="checkbox" />
            <input name="checkbox6" type="checkbox" />
            <input name="checkbox7" type="checkbox" />
            <input name="checkbox8" type="checkbox" />
            <input name="checkbox9" type="checkbox" />
            <input name="checkbox10" type="checkbox" />
            <input type="submit" name="submit" value="submit"/>
        </form>

and this is the javascript

(function () {
    function checkLikeRadio(tag) {
        var form = document.getElementById(tag);//selecting the form ID 
        var checkboxList = form.getElementsByTagName("input");//selecting all checkbox of that form who will behave like radio button
        for (var i = 0; i < checkboxList.length; i++) {//loop thorough every checkbox and set there value false. 
            if (checkboxList[i].type == "checkbox") {
                checkboxList[i].checked = false;
            }
            checkboxList[i].onclick = function () {
                checkLikeRadio(tag);//recursively calling the same function again to uncheck all checkbox
                checkBoxName(this);// passing the location of selected checkbox to another function. 
            };
        }
    }

    function checkBoxName(id) {
        return id.checked = true;// selecting the selected checkbox and maiking its value true; 
    }
    window.onload = function () {
        checkLikeRadio("form");
    };
})();

Answer 3

This is a better option as it allows unchecking also:

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

Answer 4

@DJafari's answer doesn't let unchecking the checkbox. So I've updated it like this:

$(".chb").change(function(e) {

 //Getting status before unchecking all
  var status = $(this).prop("checked");

  $(".chb").prop('checked', false);
  $(this).prop('checked', true);

 //false means checkbox was checked and became unchecked on change event, so let it stay unchecked
  if (status === false) {
    $(this).prop('checked', false);
  }

});

https://jsfiddle.net/mapetek/nLtb0q1e/4/

Answer 5

You could give the group of checkboxes you need to behave like this a common class, then use the class to attach the following event handler:

function clickReset ()
{
    var isChecked = false,
        clicked = $(this),
        set = $('.' + clicked.attr ('class') + ':checked').not (clicked);

    if (isChecked = clicked.attr ('checked'))
    {
        set.attr ('checked', false);
    }
    return true;
}

$(function ()
{
    $('.test').click (clickReset);
});

Note: This is pretty me just shooting from the hip, I've not tested this and it might need tweaking to work.

I would advise that you do look into finding a way of doing this with radio buttons if you can, as radios are the proper tool for the job. Users expect checkboxes to behave like checkboxes, not radios, and if they turn javascript off they can force through input into the server side script that you weren't expecting.

EDIT: Fixed function so that uncheck works properly and added a JS Fiddle link.

http://jsfiddle.net/j53gd/1/

Answer 6

I kept it simple...

<html>
<body>

<script>
function chbx(obj)
{
var that = obj;
   if(document.getElementById(that.id).checked == true) {
      document.getElementById('id1').checked = false;
      document.getElementById('id2').checked = false;
      document.getElementById('id3').checked = false;
      document.getElementById(that.id).checked = true;
   }
}
</script>

<form action="your action" method="post">

<Input id='id1' type='Checkbox' Name ='name1' value ="S" onclick="chbx(this)"><br />
<Input id='id2' type='Checkbox' Name ='name2' value ="S" onclick="chbx(this)"><br />
<Input id='id3' type='Checkbox' Name ='name3' value ="S" onclick="chbx(this)"><br />

<input type="submit" value="Submit" />
</form>

</body>
</html>