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

Question

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

在这里，我想在不影响其默认行为的情况下，在单选按钮的帮助下操作开关(打开/关闭(

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

以下是我尝试过的。

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

});

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