How to deselect checkboxes when only one is selected?

Asked

Viewed 636 times

1

I have nine checkboxes on my page.

<input id="chkCamp1" type="checkbox" style="margin-left: -25px" onclick="showMe('optCamp1', this)">
<input id="chkCamp2" type="checkbox" style="margin-left: -25px" onclick="showMe('optCamp2', this)">
<input id="chkCamp3" type="checkbox" style="margin-left: -25px" onclick="showMe('optCamp3', this)">
<input id="chkCamp4" type="checkbox" style="margin-left: -25px" onclick="showMe('optCamp4', this)">
<input id="chkCamp5" type="checkbox" style="margin-left: -25px" onclick="showMe('optCamp5', this)">
<input id="chkCamp6" type="checkbox" style="margin-left: -25px" onclick="showMe('optCamp6', this)">
<input id="chkCamp7" type="checkbox" style="margin-left: -25px" onclick="showMe('optCamp7', this)">
<input id="chkCamp8" type="checkbox" style="margin-left: -25px" onclick="showMe('optCamp8', this)">
<input id="chkCamp9" type="checkbox" style="margin-left: -25px" onclick="showMe('optCamp9', this)">

As with radiobuttons, I would like to do the following: when a checkbox is selected, the other nine are deselected. What’s the best way to do it?

javascript html checkbox
  • 1

    Check/Deselect Checkbox from a button despite the title, is done with checkbox

  • Why don’t you use radio button ? they already work like this

  • Gustavo if there are still doubts after you have marked the answer as accepted ask a new question.

3 answers

1


In javascript you must call a function when selecting the checkbox. You can add to onclick() that you already own.

In this example, I will use the class (cb) of checkbox to select which ones will enter the function.

First you must select all the elements and go through them by unchecking them all and at the end select only what you have marked. This function does just that:

function SetSel(elem)
{
  var elems = document.getElementsByClassName("cb");
  var currentState = elem.checked;
  var elemsLength = elems.length;

  for(i=0; i<elemsLength; i++)
  {
    if(elems[i].type === "checkbox")
    {
       elems[i].checked = false;   
    }
  }

  elem.checked = currentState;
}

Your code would look like this:

<input id="chkCamp1" class="cb" type="checkbox"  onclick=" SetSel(this);"/>1<br/>
<input id="chkCamp2" class="cb" type="checkbox"  onclick=" SetSel(this);"/>2<br/>
<input id="chkCamp3" class="cb" type="checkbox"  onclick=" SetSel(this);"/>3<br/>
<input id="chkCamp4" class="cb" type="checkbox" onclick="SetSel(this);"/>4<br/>
<input id="chkCamp5" class="cb" type="checkbox"  onclick="SetSel(this);"/>5<br/>
<input id="chkCamp6" class="cb" type="checkbox" onclick="SetSel(this);"/>6<br/>
<input id="chkCamp7" class="cb" type="checkbox"  onclick="SetSel(this);"/>7<br/>
<input id="chkCamp8" class="cb" type="checkbox"  onclick="SetSel(this);"/>8<br/>
<input id="chkCamp9" class="cb" type="checkbox"  onclick="SetSel(this);"/>9<br/>

<script>
    function SetSel(elem)
{
  var elems = document.getElementsByClassName("cb");
  var currentState = elem.checked;
  var elemsLength = elems.length;
  
  for(i=0; i<elemsLength; i++)
  {
    if(elems[i].type === "checkbox")
    {
       elems[i].checked = false;   
    }
  }
  
  elem.checked = currentState;
}
</script>

If you would like other examples, that answer might be useful.

1

You can solve it like this:

$('input').click(function() {
  $('input').prop('checked', false);
  $(this).prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

0

There is no better way, what there is is solutions that meet the problem, in case I will present one of them:

HTML:

<input id="chkCamp1" type="checkbox" data-check="1" value="1"> elemento 1
<input id="chkCamp2" type="checkbox" data-check="2" value="1"> elemento 2
<input id="chkCamp3" type="checkbox" data-check="3" value="1"> elemento 3
<input id="chkCamp4" type="checkbox" data-check="4" value="1"> elemento 4
<input id="chkCamp5" type="checkbox" data-check="5" value="1"> elemento 5<br>
<input id="chkCamp6" type="checkbox" data-check="6" value="1"> elemento 6
<input id="chkCamp7" type="checkbox" data-check="7" value="1"> elemento 7
<input id="chkCamp8" type="checkbox" data-check="8" value="1"> elemento 8
<input id="chkCamp9" type="checkbox" data-check="9" value="1"> elemento 9

Javascript:

$(function() {
    $('[data-check]').on('click', function() {
        var myInput = {valor: $(this).value, id: $(this).data('check')};
        $('[data-check]').each(function(index, value) {
            ($(this).data('check') == myInput.id) ?
             $(this).attr('checked', true) :
             $(this).attr('checked', false);
        });
    });
});

Here he running: http://jsfiddle.net/ivanferrer/9wzsu3wt/

Browser other questions tagged javascript html checkbox

You are not signed in. Login or sign up in order to post.