I would like to uncheck all the checkboxes that are presently selected if a specific checkbox is selected by the user.

Example:

<div>
    <label for="foo">
        <input type="checkbox" name="meh" id="foo" checked> foo
    </label>
</div>
<div>
    <label for="bar">
        <input type="checkbox" name="meh" id="bar" checked> bar
    </label>
</div>
<div>
    <label for="foobar">
        <input type="checkbox" name="meh" id="foobar"> foobar
    </label>
</div>
<div>
    <label for="barfoo">
        <input type="checkbox" name="meh" id="barfoo" checked> barfoo
    </label>
</div>
<div>
    <label for="omgwtfbbq">
        <input type="checkbox" name="meh" id="omgwtfbbq"> omgwtfbbq
    </label>
</div>

If the user selects "omgwtfbbq" checkbox, I would like all the other boxes that might be checked to be unchecked and have the "omgwtfbbq" be the only one checked.

I would like to uncheck all the checkboxes that are presently selected if a specific checkbox is selected by the user.

Example:

<div>
    <label for="foo">
        <input type="checkbox" name="meh" id="foo" checked> foo
    </label>
</div>
<div>
    <label for="bar">
        <input type="checkbox" name="meh" id="bar" checked> bar
    </label>
</div>
<div>
    <label for="foobar">
        <input type="checkbox" name="meh" id="foobar"> foobar
    </label>
</div>
<div>
    <label for="barfoo">
        <input type="checkbox" name="meh" id="barfoo" checked> barfoo
    </label>
</div>
<div>
    <label for="omgwtfbbq">
        <input type="checkbox" name="meh" id="omgwtfbbq"> omgwtfbbq
    </label>
</div>

If the user selects "omgwtfbbq" checkbox, I would like all the other boxes that might be checked to be unchecked and have the "omgwtfbbq" be the only one checked.

• javascript
• jquery
• html
• checkbox

• Hey all, I fixed the issue with the name="" not being consistent and I fixed the for="" so it was not id="" (D'Oh!!!!) – Abela Commented Jan 21, 2014 at 4:00

3 Answers 3

for the label instead of id I think you need for

<div>
    <label for="foo">
        <input type="checkbox" name="foo" id="foo" checked /> foo
    </label>
</div>
<div>
    <label for="bar">
        <input type="checkbox" name="bar" id="bar" checked /> bar
    </label>
</div>
<div>
    <label for="foobar">
        <input type="checkbox" name="foobar" id="foobar" /> foobar
    </label>
</div>
<div>
    <label for="barfoo">
        <input type="checkbox" name="barfoo" id="barfoo" checked /> barfoo
    </label>
</div>
<div>
    <label for="omgwtfbbq">
        <input type="checkbox" name="omgwtfbbq" id="omgwtfbbq" /> omgwtfbbq
    </label>
</div>

then

var $others = $('input[type="checkbox"][name="meh"]').not('#omgwtfbbq')
$('#omgwtfbbq').change(function () {
    if (this.checked) {
        $others.prop('checked', false)
    }
});
$others.change(function () {
    if (this.checked) {
        $('#omgwtfbbq').prop('checked', false)
    }
})

Demo: Fiddle

Note: I'll add a mon class to all the input elements which has to be affected by omgwtfbbq and change var $others = $('#foo, #bar, #foobar, #barfoo') to var $others = $('.myclassoninput')

Live demo (click).

$('#omgwtfbbq').click(function() {
  $('input:checkbox').not(this).attr('checked', false);
});

Also note that you're re-using id's. Id's should only be used once in a document.

If you choose not to give each checkbox a sequential IDs so that you can use an array, here's a solution:

Place all your controls in a div, with an ID "checkgroup".

Then the JavaScript function goes:

function checkone(d){
  if (!d.checked) return; //if it's unchecked, then do nothing

  var group=document.getElementById('checkgroup');
  var os=group.getElementsByTagName('input');
  for (var i=0;i<os.length;i++){

    if (os[i].checked&&os[i]!=d) os[i].checked=false;

  }

}

Now you can call this function in each checkbox

<div id="checkgroup">
  <input id="abcd" onclick="checkone(this);">
  <input id="xyz" onclick="checkone(this);">
  ...
</div>

Note how you don't even need to bother with the name, because the object passes in itself.