Someone would have a solution to turn "checkbox" into "radio"

Asked

Viewed 146 times

0

I have a Jquery code along with Js, because I intend to turn checkbox into radio, this code works with radios, with just one click on the same location it unchecks the radio if it is marked, and if the user clicks on another it unchecks the previous one and so on, So far so good! but to work with checkbox I changed the references specifying checkbox, but I did not proceed and the checkbox behave in a standard way. Someone would have the solution of what the code would look like by adding checkbox in Jquery and they would behave as 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
  • 1

    Essential reading: What is the impact of changing the default behavior of an HTML element?

  • 1

    If you want radio, use <input type="radio">; any other solution is an extremely precarious service (not quite in that word I thought), unless you really have a technical reason to make the behavior change (which is clearly not the case with the scenario described in the question).

  • 2

    @Bacco the word would be gambiarra.

  • It cannot be the same "radio", I will increment two types of buttons to the same element, whose properties are equal and do not cause interference to each other, a radio and checkbox incremented to the same element but with different styling and checking resulting in different attributes

  • It really is gambiarra. There is practically no difference in changing the amount of radios or checkboxes, whatever the stylization. It is really the suggestion to do straight, break will learn a little more about HTML. Even, in the end it is even simpler than the patch with JS

  • You being right is really gambiarra, I’m testing now, because even I got confused when opening my code just now, it took me 5 minutes to understand it again kkkk

  • @Elienayjunior has a time when we need to do some weird stuff, but it’s just that in your case it really would have been better if you presented the original attempt with radio, and explained why it didn’t work out, so someone could propose a solution to the "right" code. Think about it in the next posts to not fall in the XY problem - Which is when you ask for help for a specific solution attempt (which is not always the best), instead of asking about the real problem that started the attempt.

  • 1

    I was going to do it, but the code is so messed up that I was embarrassed to post, it worked well in the code the gambiarra worked, but I realized that the gambiarra goes much further than I want, it led to another problem, but I prefer to here, it is very messy

Show 3 more comments

1 answer

2


You can do it this way:

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

  • It works that way, though! he doesn’t clear by clicking on it, just missed it, I wanted it at the same time he uncheck and work the same way you did

  • Look now.....

  • Now the connection is good, I’ll play it here in my code and see how it behaves using two types of buttons in the same element with different checks and attributes

Browser other questions tagged javascript html jquery

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