1

Possuo nove checkboxes na minha página.

<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)">

Assim como em radiobuttons, eu gostaria de fazer o seguinte: quando uma checkbox é selecionada, as outras nove são deselecionadas. Qual o melhor jeito de fazer?

3
  • 1
    Marcar/Desmarcar Checkbox a partir de um botão apesar do título, é feito com checkbox
    – rray
    Commented 23/10/2015 às 11:44
  • por que você não usa radio button ? eles já trabalham assim Commented 23/10/2015 às 12:07
  • Gustavo se ainda sobram dúvidas depois de teres marcado a resposta como aceite faz uma nova pergunta.
    – Sergio
    Commented 23/10/2015 às 14:55

3 Respostas 3

1

Em javascript você deverá chamar uma função ao selecionar o checkbox. Você pode adicionar ao onclick() que você já possui.

Neste exemplo, utilizarei a classe (cb) do checkbox para selecionar quais entrarão na função.

Primeiro você deverá selecionar todos os elementos e percorrer os mesmos desmarcando todos e no final seleciona somente o que você marcou. Esse função faz exatamente isso:

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;
}

Com seu código ficaria assim:

<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>

Caso queira outros exemplos, essa resposta poderá ser útil.

1

Você pode resolver assim:

$('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

Não existe uma melhor, forma, o que existe é soluções que atendem o problema, no caso, eu vou apresentar uma delas:

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);
        });
    });
});

Aqui ele funcionando: http://jsfiddle.net/ivanferrer/9wzsu3wt/

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .