radio单选点击可取消已选择选项

本文转载自查看原文 2018-07-04 18:34 4709 前端

radio单选选中后，再次点击可取消选中，实现选项必须单选或者不选择。

效果如下：

您喜欢哪款浏览器？

Internet Explorer
Firefox
Netscape
Opera

具体代码如下：

<!DOCTYPE HTML>
<html>
<head>
<title>单选按钮可取消取消</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
$('input:radio').click(function(){
//alert(this.checked);

var domName = $(this).attr('name');

var $radio = $(this);
// if this was previously checked
if ($radio.data('waschecked') == true){
$radio.prop('checked', false);
$("input:radio[name='" + domName + "']").data('waschecked',false);
//$radio.data('waschecked', false);
} else {
$radio.prop('checked', true);
$("input:radio[name='" + domName + "']").data('waschecked',false);
$radio.data('waschecked', true);
}
});
});
</script>
</head>
<body>
<p>您喜欢哪款浏览器？</p>

<form>

<input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br />
<input type="radio" name="browser" value="Firefox">Firefox<br />
<input type="radio" name="browser" value="Netscape">Netscape<br />
<input type="radio" name="browser" value="Opera">Opera<br />
</form>

</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 Winform 可取消的单选按钮（RadioButton） vue效果之改element的el-checkbox-group多选框组为单选可取消的单选框(样式还是多选框的样式) 点击DIV触发其他元素的点击事件(案例：点击type="radio" 的input 标签外层DIV，触发内部单选点击选中事件) jsp实现复选框默认选中，不可取消自定义按键响应QComboBox选择选项的方法 windows使用git bash 无法交互键盘上下键移动选择选项的解决方法基于DevExpress开发的GridView如何实现某一列的一行让用户可以从下列列表选择选项 js：获取单选组radio中的被选择的数据 jquery解决input[type=radio]点击选中取消 layui checkbox 复选框单选取消选择