[英]Radio button uncheck on second click
我有很多单选按钮从我的数据库中获取一个值,如果它设置为“1”,我会选中单选按钮。
如果选中一个单选按钮,并且用户再次单击它,我仍然希望能够清除此按钮。 有没有人有想法?
$radio1
从数据库中$radio1
数据,值为 0、1 或 2
<input value="1" name="radio1" type="radio"<?php if($radio1==1){echo " checked";} ?>>
<input value="2" name="radio2" type="radio"<?php if($radio1==2){echo " checked";} ?>>
Varun Malhotra 的回答略有修改:我更改了 2 行对我来说效果更好的代码。 但总的来说,Varun 的回答是完美的!
$('input[type="radio"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
{
$radio.prop('checked', true);
$radio.data('waschecked', true);
}
// remove was checked from other radios
$radio.siblings('input[type="radio"]').data('waschecked', false);
});
我建议添加一个自定义属性来跟踪每个收音机的先前状态,如下所示:
$(function(){
$('input[name="rad"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[name="rad"]').data('waschecked', false);
});
});
您还需要将此属性添加到最初检查的单选标记中
<input type="radio" name="rad" id="Radio0" checked="checked" data-waschecked="true" />
更新:
$(function(){
$('input[name="rad"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else
$radio.data('waschecked', true);
// remove was checked from other radios
$radio.siblings('input[type="radio"]').data('waschecked', false);
});
});
但是请确保您没有其他无线电组可以使用,否则您必须提供一些属性来指定这些按钮,例如我之前关注的名称道具。
这应该比其他解决方案更普遍,因为它处理所有无线电不在同一个父级的情况。
var $radios = $('input[type="radio"]');
$radios.click(function () {
var $this = $(this);
if ($this.data('checked')) {
this.checked = false;
}
var $otherRadios = $radios.not($this).filter('[name="'
+ $this.attr('name') + '"]');
$otherRadios.prop('checked', false).data('checked', false);
$this.data('checked', this.checked);
});
当您第一次单击时,在单击之前触发更改事件。 你可以使用它们。 与许多无线电组一起工作,即使您已经预先检查了单选按钮。
$("input[type=radio]").each(function() {
var secondClick = true;
$(this).change(function() {
secondClick = false;
});
$(this).click(function() {
if (secondClick) {
$(this).prop("checked", false);
}
secondClick = true;
});
});
尝试这个
$('input[name="rad"]').click(function(){
var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true)
{
$radio.prop('checked', false);
$radio.data('waschecked', false);
}
else{
$radio.data('waschecked', true);
}
// remove was checked from other radios
$('input[name="rad"]').not($(this)).data('waschecked', false);
});
$("input[type=radio]").on('click', function () {
if ($(this).is(':checked')) {
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
这是我的解决方案,适用于触摸设备和鼠标点击:
$('input[type=radio]').bind('touchstart mousedown', function() {
this.checked = !this.checked
}).bind('click touchend', function(e) {
e.preventDefault()
});
我不知道确切的原因,但是用户softvar选择的答案对我不起作用,所以经过大约两个小时的尝试,我根据 softvar 的答案提出了以下内容。 把它放在这里以防它可以帮助别人。 您可以根据从数据库获得的“选定”值,将 HTML 中的“数据活动”指定为 0 或 1。
<input type="radio" name="user" value="1" data-active="0"> User 1
<input type="radio" name="user" value="2" data-active="0"> User 2
和
$('input[name="user"]').on('click', function() {
if ($(this).data('active') == 0) {
$('input[name="user"]').data('active', 0);
$(this).data('active', 1);
} else {
$(this).data('active', 0);
$(this).prop('checked', false);
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.