如何使用jQuery点击radio按钮控制开关切换且不影响其默认行为

• 点击标注为「On」的radio单选按钮时，开关切换为开启状态
• 点击标注为「Off」的radio单选按钮时，开关切换为关闭状态
• 实现过程不影响radio按钮的默认行为

你当前的代码仅修改了滑块容器的背景样式类，没有同步控制开关内置的checkbox选中状态，因此依赖input:checked触发的滑块位移动效、ON/OFF文字切换逻辑都不会生效。

JavaScript代码 #

$(document).ready(function(){
  // 初始化：同步开关状态和默认选中的radio状态
  var defaultRadioVal = $('input[type="radio"][name="box"]:checked').val();
  $('#togBtn').prop('checked', defaultRadioVal === 'off');

  // 绑定radio点击事件
  $('input[type="radio"]').click(function () {
    var inputValue = $(this).attr("value");
    // 同步checkbox选中状态，off对应checkbox选中，on对应未选中
    $('#togBtn').prop('checked', inputValue === 'off');
    // 原有样式类切换逻辑可以保留，也可以直接删除（checked状态已经能控制背景色）
    if (inputValue == "on") {
      $('#toggleswitch').addClass("toggleon");
      $('#toggleswitch').removeClass("toggleoff");          
    }
    if (inputValue == "off") {
      $('#toggleswitch').addClass("toggleoff");
      $('#toggleswitch').removeClass("toggleon");          
    }
  });
});

CSS代码（无需修改） #

.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
  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;
}

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;    
}

HTML代码（无需修改） #

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

修改后逻辑会同步radio和开关checkbox的选中状态，你原有写的样式动效、文字切换逻辑都可以正常触发，完全不影响radio的默认单选行为。如果不需要冗余的样式类控制，也可以把手动切换toggleon/toggleoff的代码删掉，input:checked的原生选择器已经能控制滑块背景色。

内容的提问来源于stack exchange，提问作者user3448925