[英]Uncheck checked radio button by clicking on label using jQuery
我需要使用jQuery取消选中已检查的单选按钮。 按钮本身是隐藏的,所以我使用标签上的点击来触发这个。 到目前为止,我有:
HTML
<form>
<h4>Where would you like to work?</h4>
<div class="radio-holder">
<input id="form1_areas1" name="areas" type="radio" value="area/london">
<label for="form1_areas1">London</label>
</div>
<div class="radio-holder">
<input id="form1_areas2" name="areas" type="radio" value="area/west-midlands">
<label for="form1_areas2">West Midlands</label></div>
</form>
SCSS
form {
max-width: 500px;
margin: 0 auto;
padding-top: 20px;
}
div.radio-holder {
padding: 10px;
}
input[type="radio"] {
display:none;
&:checked+label {
border-bottom: 2px solid #222222;
padding-bottom: 0px;
}
}
JQUERY
$(document).ready(function(){
$("form input[type='radio']:checked + label").click(function(){
$(this).prev().prop( "checked", false );
});
});
这里有一个CodePen
但这并不是取消选中单选按钮。 我知道这不是单选按钮的标准功能,但是如果需要,我需要用户能够将单选按钮集还原为未选择状态,同时还限制他们从选项集中选择一个。 任何帮助非常感谢。
干杯
麦克风
要启用/禁用相同的无线电,您必须使用event.preventDefault()
来防止默认行为(单击标签时启用复选框,因此检查的prop将始终设置为true)并使语法无线电启用/禁用,如下面的片段:
$(document).ready(function(){ $("label").click(function(e){ e.preventDefault(); $check = $(this).prev(); if($check.prop('checked')) $check.prop( "checked", false ); else $check.prop( "checked", true ); //console.log($check.prop("checked")); }); });
form { max-width: 500px; margin: 0 auto; padding-top: 20px; } div.radio-holder { padding: 10px; } input[type="radio"] { display:none; } input[type="radio"]:checked+label { border-bottom: 2px solid #222222; padding-bottom: 0px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <h4>Where would you like to work?</h4> <div class="radio-holder"> <input id="form1_areas1" name="areas" type="radio" value="area/london"> <label for="form1_areas1">London</label> </div> <div class="radio-holder"> <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands"> <label for="form1_areas2">West Midlands</label></div> </form>
你可以使用下一个技巧:
- 添加data-num
属性。
- 每次点击都使用data-num
来检查/取消选中单选按钮。
希望能帮助到你:
$(document).ready(function(){ $("input").click(function(){ $("input").not(this).attr("data-num", 1); var data = $(this).attr("data-num") if(data==1){ data = 2 $(this).attr("data-num", data); return; } if(data==2){ data = 1 $(this).prop('checked', false); $(this).attr("data-num", data); return; } }) })
form { max-width: 500px; margin: 0 auto; padding-top: 20px; } div.radio-holder { padding: 10px; } input[type="radio"] { display:none; } input[type="radio"]:checked+label { border-bottom: 2px solid #222222; padding-bottom: 0px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <h4>Where would you like to work?</h4> <div class="radio-holder"> <input id="form1_areas1" name="areas" type="radio" value="area/london" data-num="1"> <label for="form1_areas1">London</label> </div> <div class="radio-holder"> <input id="form1_areas2" name="areas" type="radio" value="area/west-midlands" data-num="1"> <label for="form1_areas2">West Midlands</label></div> </form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.