Would someone have a solution to turn "checkbox" into "radio"

Question

Would someone have a solution to turn "checkbox" into "radio"

Navigation

#1 by (2 votes)

0

I have a Jquery code along with Js, because I want to turn checkbox into a radio, this code works with radios, with just one click in the same place it unmark the radio if it is checked, and if the user clicks another it unchecks the previous one and so on, so far so good! but to work with checkbox I changed the references by specifying checkbox, however I did not proceed and the checkbox behaves by default. Would anyone have the solution of how would the code add the checkbox in Jquery and they behave like I mentioned above?

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

javascript html jquery

asked by anonymous 24.05.2018 / 00:05

1 answer

Javascript does not work in Webview Popular select dynamically

score 2 · Accepted Answer

You can do this:

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