I would like to make the whole radio button clickable. For example, when I click on the On radio button the switch should turn on, & click on the OFF radio button it will toggle to OFF.

here i want to operate switch(on/off) with the help of radio button without affecting its default behaviour

$(document).ready(function(){
      $('input[type="radio"]').click(function () {
        var inputValue = $(this).attr("value");
        if (inputValue == "on") {
          $('#toggleswitch').addClass("toggleon");
          $('#toggleswitch').removeClass("toggleoff");          
        }
        if (inputValue == "off") {
          $('#toggleswitch').addClass("toggleoff");
          $('#toggleswitch').removeClass("toggleon");          
        }
        
      });

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    /*top: 75px;*/
    left: 4px;
  }
  
  .switch input {
    display: none;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: green;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked   .slider {
    background-color: red;
  }
  
  input:focus   .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked   .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
  }
  
  .off {
    display: none;
  }
  
  .on,
  .off {
    color: green;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 10px;
    left: 55px;
    font-size: 14px;    
  }
  
  .off{
      color:red;
  }
  /*.off {
    top: 8px;
  }
  
  .on {
    left: auto;
    right: -5px;
    top: 8px;
  }*/
  
  input:checked  .slider .off {
    display: block;
  }
  
  input:checked   .slider .on {
    display: none;
  }  
  
  .slider.round {
    border-radius: 17px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .toggleoff{
    background-color: red;
  }
  .toggleon{
    background-color:green;
  }
  .toggledisabled{
    background: #D3D3D3 !important;    
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
  <input type="checkbox" id="togBtn">
  <div class="slider round" id="toggleswitch">
    <span class="on">ON</span>
    <span class="off">OFF</span>
  </div>
</label>

<div class="">                                    
  <input type="radio" id="on" name="box" value="on"  checked >
  <label for="on">On</label>
  <br />
  <input type="radio" id="off" name="box" value="off" >
  <label for="off">Off</label>
        </div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Below is what I tried.

CodePudding user response：

I do not completely understand your question. But I think you are looking for something like this?

$(document).ready(function(){

      $('#span_on').click(function () {
          $('#toggleswitch').addClass("toggleon");
          $('#toggleswitch').removeClass("toggleoff");   
          $('#text_off').hide();
          $('#text_on').show();
        });

      $('#span_off').click(function () {
          $('#toggleswitch').addClass("toggleoff");
          $('#toggleswitch').removeClass("toggleon");          
          $('#text_on').hide();
          $('#text_off').show();
        });

      });

.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
    /*top: 75px;*/
    left: 4px;
  }
  
  .switch input {
    display: none;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: green;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 3px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  input:checked   .slider {
    background-color: red;
  }
  
  input:focus   .slider {
    box-shadow: 0 0 1px #2196F3;
  }
  
  input:checked   .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
  }
  
  .off {
    display: none;
  }
  
  .on,
  .off {
    color: green;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 10px;
    left: 55px;
    font-size: 14px;    
  }
  
  .off{
      color:red;
  }
  /*.off {
    top: 8px;
  }
  
  .on {
    left: auto;
    right: -5px;
    top: 8px;
  }*/
  
  input:checked  .slider .off {
    display: block;
  }
  
  input:checked   .slider .on {
    display: none;
  }  
  
  .slider.round {
    border-radius: 17px;
  }
  
  .slider.round:before {
    border-radius: 50%;
  }

  .toggleoff{
    background-color: red;
  }
  .toggleon{
    background-color:green;
  }
  .toggledisabled{
    background: #D3D3D3 !important;    
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="switch">
  <input type="checkbox" id="togBtn">
  <div class="slider round" id="toggleswitch">
    <span class="on" id="text_on">ON</span>
    <span class="off" id="text_off">OFF</span>
  </div>
</label>

<div class="">                                    
  <span id="span_on"><input type="radio" id="on" name="box" value="on"  checked >
  <label for="on">On</label></span>
  <br />
  <span id="span_off"><input type="radio" id="off" name="box" value="off" >
  <label for="off">Off</label></span>
        </div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

 $('input[type="radio"]').click(function () {
    var inputValue = $(this).attr("value");
    if (inputValue == "on") {
      $('#toggleswitch').addClass("toggleon");
      $('#toggleswitch').removeClass("toggleoff");      
      $('#togBtn').prop('checked', false); 
    }
    if (inputValue == "off") {
      $('#toggleswitch').addClass("toggleoff");
      $('#toggleswitch').removeClass("toggleon");
      $('#togBtn').prop('checked', true); 
    }
    
  });