我需要使用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
但这并不是取消选中单选按钮。我知道这不是单选按钮的标准功能,但是如果需要,我需要用户能够将单选按钮集还原为未选择状态,同时还限制他们从选项集中选择一个。非常感谢任何帮助。
干杯
麦克
答案 0 :(得分:1)
要启用/禁用相同的无线电,您必须使用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"));
});
});
&#13;
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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
你可以使用下一个技巧:
- 添加java.lang.IllegalArgumentException: java.security.KeyStoreException: Cannot store non-PrivateKeys
属性
- 每次点击都会显示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;
}