CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Abela
Abela

Reputation: 1233

jQuery - Uncheck other checkboxes if a specific checkbox is selected by user

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.

Upvotes: 0

Views: 10527

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388316

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 common 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')

Upvotes: 7

Schien
Schien

Reputation: 3903

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.

Upvotes: 0

m59
m59

Reputation: 43745

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.

Upvotes: 2

Related Questions