Button can not mark radio button nor do right in div

Question

good morning!

I have the script below that is with two flaws:

1. When I click on buttons the radio Buttons are not being marked
2. When you click the button on the right, the ball moves to the left and changes the text. This was what was expected. But when I click the left button, only the text is changing but the ball is not Ind to the right!

Where am I going wrong?

    $("div.btnyesno > button#sim").click(function() {
        $("div.btnyesno > div#containerbtn > div#label")
               .css("right", "5px")
               .html("Não");
        //$("div.btnyesno > input[type=radio][id=bloq]").prop("checked", true);
    });
    $("div.btnyesno > button#nao").click(function() {   
        $("div.btnyesno > div#containerbtn > div#label")
               .css("left", "5px")
               .html("Sim");
        //$("div.btnyesno > input[type=radio][id=desbloq]").prop("checked", true);
        
    });

    div.btnyesno > input[type="radio"] {
        display: none;
    }
    div.btnyesno {
        position:relative;
        display: flex;
        width: 200px;
        height: 70px;
    }
    div.btnyesno > div#containerbtn {
        position:relative;
        display: flex;;
        align-items: center;
        width: 100px;
        height: 50px;;
        border: 1px solid #000;
        border-radius: 500px;
    }
    div.btnyesno > div#containerbtn > div#label {
        position:absolute;
        display: flex;
        right: 5px;
        width: 45px;
        height:45px;
        align-items: center;
        justify-content: center;
        border: 1px solid #000;
        border-radius: 500px;
        transition: all 500ms;
    }
    div.btnyesno > button{
        position:relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height:50px;
    }
    div.btnyesno  > button#sim {
        left: -10px;
    }
    div.btnyesno  > button#nao {
        right: -10px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btnyesno">
    <input type="radio" name="bloq" id="bloq">
    <button for="bloq" id="sim">Sim</button>
    <div id="containerbtn"> 
      <div id="label">Não</div>
    </div>
    <button for="desbloq" id="nao">Não</button>
    <input type="radio" name="bloq" id="desbloq">
</div>

After Hugo’s explanation I’m trying to do without JS but I found another problem.

In the approach below,

    div.btnyesno > input[type="radio"] {
        display: none;
    }
    div.btnyesno {
        position: relative;
        display: flex;
        width: 200px;
        height: 70px;
    }
    div.btnyesno > div#containerball {
        position: relative;
        display: flex;
        align-items: center;
        width: 100px;
        height: 50px;
        border: 1px solid #000;
        border-radius: 500px;
    }
    div.btnyesno > div#containerball > div#ball {
        position: absolute;
        display: flex;
        left: 50px;
        width: 45px;
        height: 45px;
        background: #ccc;
        align-items: center;
        justify-content: center;
        border-radius: 500px;
        transition: all 500ms;
    }
    div.btnyesno > label{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        cursor: pointer;
    }
    div.btnyesno > label#sim {
        left: -10px;
    }
    div.btnyesno > label#nao {
        right: -10px;
    }
    #bloq:checked ~ #label {
      left: 5px !important;
    }
    #desboq:checked ~ #label {
      right: 5px !important;
    }       
    .btnYes {
        left: 5px !important;
    }
    .btnNo {
        right: 5px !important;
    }

    <div class="btnyesno">
        <input type="radio" name="bloq" id="bloq" value="bloq">
        <input type="radio" name="bloq" id="desbloq" value="desbloq" checked>
        <label role="button" for="bloq" id="sim">Sim</label>
        <div id="containerball">    
          <div id="ball"></div>
        </div>
        <label role="button" for="desbloq" id="nao">Não</label>
    </div>

the ball no longer changes position.

But input gets the label click.

Answer 1

Your code, in addition to the detail of the selectors I mentioned before, has several improvement points in CSS and javascript.

I will comment on a few points here:

• Simplify the selector by ID;
• Add CSS classes to position the element and make the change between those classes instead of doing it with javascript;
• If you only want to position the element, you can only use the property left, leave zero to be left and a positive value to unlock more "to the right", no need to use right.

See here an example:

$("#sim").click(function() {
  $("#label")
     .removeClass("nao")
     .addClass("sim");
});
    
$("#nao").click(function() {   
    $("#label")
       .removeClass("sim")
       .addClass("nao");
});

div.btnyesno > input[type="radio"] {
        display: none;
    }
    div.btnyesno {
        position:relative;
        display: flex;
        width: 200px;
        height: 70px;
    }
 #containerbtn {
        position:relative;
        display: flex;;
        align-items: center;
        width: 100px;
        height: 50px;;
        border: 1px solid #000;
        border-radius: 500px;
    }
#containerbtn > div#label {
        position:absolute;
        display: flex;
        right: 5px;
        width: 45px;
        height:45px;
        align-items: center;
        justify-content: center;
        border: 1px solid #000;
        border-radius: 500px;
        transition: all 500ms;
    }
    div.btnyesno > button{
        position:relative;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height:50px;
    }

   .sim {
     left: 0;
     
   }
   .sim:before {
     content: "Sim";
   }

   .nao {
    left: 50px;
   }
   
   .nao:before {
     content: "Não";
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="btnyesno">
    <input type="radio" name="bloq" id="bloq">
    <button for="bloq" id="sim">Sim</button>
    <div id="containerbtn"> 
      <div id="label"class="nao"></div>
    </div>
    <button for="desbloq" id="nao">Não</button>
    <input type="radio" name="bloq" id="desbloq">
</div>

I took the opportunity and I also content with Yes/No based on class, so you don’t need to change anything in the javascript, only the classes, which solve everything else

Answer 2

Guy doesn’t even need JS to do it, let alone jQuery, only with CSS vc solves everything.

The text you exchange using the pseudo-element ::after, the button does not have the attribute for as you used, for this uses a label who accepts the for, and put in it the role="button" to give semantics.

Then use the adjacent selector ~ for the CSS rule to activate the corresponding elements by clicking on the label (clicking on the laber with for you activate the radio with the ID correspondent)

Code of the image above:

div.btnyesno > input[type="radio"] {
  display: none;
}

div.btnyesno {
  position: relative;
  display: flex;
  width: 200px;
  height: 70px;
}

div.btnyesno > div#containerbtn {
  position: relative;
  display: flex;
  ;
  align-items: center;
  width: 100px;
  height: 50px;
  ;
  border: 1px solid #000;
  border-radius: 500px;
}

div.btnyesno > div#containerbtn > div#label {
  position: absolute;
  display: flex;
  right: 5px;
  width: 45px;
  height: 45px;
  align-items: center;
  justify-content: center;
  border: 1px solid #000;
  border-radius: 500px;
  transition: all 500ms;
}

div.btnyesno > label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  cursor: pointer;
  border: 1px solid #999;
  border-radius: 4px;
  background-color: #ddd;
}

div.btnyesno > label#sim {
  left: -10px;
}

div.btnyesno > label#nao {
  right: -10px;
}

/* correções */
#bloq:checked ~ #sim,
#desbloq:checked ~ #nao{
  background-color: red;
}
#bloq:checked ~ #containerbtn > #label {
  left: 5px !important;
}

#label::after {
  content: "não";
}
#bloq:checked ~ #containerbtn > #label::after {
  content: "sim";
}

<div class="btnyesno">
  <input type="radio" name="bloq" id="bloq">
  <input type="radio" name="bloq" id="desbloq">
  <label for="bloq" id="sim" role="button">Sim</label>
  <div id="containerbtn">
    <div id="label"></div>
  </div>
  <label for="desbloq" id="nao" role="button">Não</label>
</div>