单击单选按钮以使用 jquery 切换开关

Posted 2023-05-08

【中文标题】单击单选按钮以使用 jquery 切换开关

【英文标题】：click on radio button to toggle switch on ,off using jquery

【发布时间】：2022-01-12 08:57:11

【问题描述】：

我想让整个单选按钮都可以点击。例如，当我单击 On 单选按钮时，开关应该打开，然后单击 OFF 单选按钮，它将切换到 OFF。

这里我想在不影响其默认行为的情况下借助单选按钮操作开关（开/关）

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

以下是我尝试过的。

【参考方案1】：

 $('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); 
    
    
  );

【讨论】：

使用prop()方法开启/关闭。

感谢您的回复，但它对我不起作用。

jsfiddle.net/kartik_bhalala/Lt5edaq3你可以查看这个网址。

。非常感谢。有一个微小的变化，它奏效了。

【参考方案2】：

我不完全理解你的问题。但我认为您正在寻找这样的东西？

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

【讨论】：

是的，但是当单击单选按钮关闭时，只有开关的背景发生变化，开关保持在相同的位置。单击“关闭”单选按钮时，我希望切换行为成为默认行为。谢谢

& 也点击关闭单选按钮并切换开关，它保持关闭。可以改变吗？提前谢谢你。