0

Tenho um código Jquery junto com Js, pois pretendo transformar checkbox em radio, esse código funciona com radios, com apenas um clique no mesmo local ele desmarca o radio caso esteja marcado, e caso o usuário clicar em outro ele desmarca o anterior e assim por diante, até aí tudo bem! mas para funcionar com checkbox mudei as referencias especificando checkbox, porém não procedi e os checkbox se comportam de forma padrão. Alguém teria a solução de como ficaria o código adicionando checkbox no Jquery e eles se comportarem como eu citei acima ?

$("input:checkbox").on("click",function (e) {
        var inp=$(this);
    if (inp.is(".theone")) {
        inp.prop("checked",false).removeClass("theone");
    } else {
        $("input:checkbox[name='"+inp.prop("name")+"'].theone").removeClass("theone");
        inp.addClass("theone");
    }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<span class='radioholder'><input type='checkbox' value='test' name='test'/>
<input type='checkbox' value='test1' name='test'/>
<input type='checkbox' value='test2' name='test'/>
<input type='checkbox' value='test3' name='test'/>
<input type='checkbox' value='test4' name='test'/>
    <input type='checkbox' value='test5' name='test'/></span>

8
  • 1
  • 1
    Se quer radio, use <input type="radio">; qualquer outra solução é um serviço extremamente precário (não foi bem nessa palavra que eu pensei), a não ser que você tenha realmente uma razão técnica pra fazer a alteração de comportamento (que claramente não é o caso do cenário descrito na pergunta).
    – Largato
    23/05/2018 às 22:37
  • 2
    @Bacco a palavra seria gambiarra.
    – Woss
    23/05/2018 às 22:47
  • Não pode ser o mesmo "radio", eu vou incrementar dois tipos de botões a um mesmo elemento, sendo que suas propriedades sejam iguais e que não causem interferência um no outro, um radio e checkbox incrementados ao mesmo elemento mas com estilização diferentes e checagens resultando em diferentes atributos 23/05/2018 às 22:59
  • 1
    Eu ia fazer isso, mas o código tá tão bagunçado que me deu vergonha de postar, resultou bem no código a gambiarra funcionou, mas percebi que a gambiarra vai bem mais longe do que eu quero, acarretou em outro problema, mas prefiro para por aqui, está muito bagunçado 23/05/2018 às 23:50

1 Resposta 1

2

Pode fazer desta forma:

$("input:checkbox").on("click",function(){
   
   var inp = $(this);

   // desmarco tudo (menos o clicado) e removo a classe
   $("input:checkbox")
   .not(inp)
   .prop("checked", false)
   .removeClass("theone")

   // verifico se está checado e altero a classe
   inp
   .prop("checked", inp.is(":checked"))
   .toggleClass("theone");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='radioholder'><input type='checkbox' value='test' name='test'/>
<input type='checkbox' value='test1' name='test'/>
<input type='checkbox' value='test2' name='test'/>
<input type='checkbox' value='test3' name='test'/>
<input type='checkbox' value='test4' name='test'/>
<input type='checkbox' value='test5' name='test'/></span>

3
  • Funciona dessa forma, porém! ele não desmarca ao clicar no mesmo, só faltou isso, eu queria que ao mesmo tempo ele desmarcasse e funcionasse dessa mesma forma que vc fez 23/05/2018 às 22:55
  • Veja agora.....
    – Sam
    23/05/2018 às 23:04
  • Agora a ligação ficou boa, eu vou jogar ele aqui no meu código e ver como se comporta utilizando dois tipos de botões em um mesmo elemento com checagens e atributos diferentes 23/05/2018 às 23:11

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 .