radio单选点击可取消已选择选项 - 代码天地

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

其他 2018-07-04 18:55:50 阅读次数: 0

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>

猜你喜欢

转载自www.cnblogs.com/senlu/p/9264780.html

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

单选按钮可取消可选中

element ui 中checkbox或radio不可勾选/不可取消勾选/点击没有反应

设置点击外部不可取消Dialog

可取消编辑IEditableObject的使用

使用Vue实现计算总价，再次点击即可取消

按值设置选择选项“已选择”

14.3.1选择选项

vue效果之改element的el-checkbox-group多选框组为单选可取消的单选框(样式还是多选框的样式)

【mpvue】radio-group 标签组设置默认选择checked: 'true'，选择了单选按钮的非默认选项，再点击其他的选择，单选按钮又会变成默认的选项

js 弹出自带弹窗可取消

线程池-实现可取消定时任务

input单选框radio点击选中、取消选中

nz-radio的再次点击取消选项的实现

C# Task 暂停与取消或Ｃ＃中可取消的Task

BlockUI InterpartSelection部件间选择选项

单个单选框radio 点击选中点击取消选中

uni-app开发小程序，radio单选按钮，点击可以选中，再次点击可以取消

VUE中使用ElementUI组件的单选按钮el-radio-button实现第二点击时取消选择的功能

微信小程序radio单选框，再次点击取消

单选框（radio）实现性别选择，实现选中后取消

选择框可以同时输入和选择选项

uniapp组件之选择选项（如套餐选择）

单选框radio单击取消选中

【C#控制台】实现光标选择选项

单选按钮点击取消、选中

单选按钮(radio)的取值和点击事件

input单选组（radio）,点击事件

leetcode — JavaScript专题（八）：间隔取消、使用方法链的计算器、判断对象是否为空、记忆函数 II、设计可取消函数

单选/复选框中点击文字能选择该选项

今日推荐

《美国对全球网络空间安全与发展的威胁和破坏》报告发布

火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？

北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”

LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍

周排行

循环神经网络（rnn）讲解

Tigao教程四：单独的关节运动

金蝶K3WISE15.0-注册套打教程

如何在Mac上配置Kubernetes

Android应用结束自身进程的方法

SpringMVC学习十三拦截器栈

中国驻洛杉矶总领馆举行新春招待会

HttpClient get post 发送

11 - three.js 笔记 - 绘制三维字体模型

Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点

每日归档

更多

2024-05-01(4)

2024-04-30(1)

2024-04-29(40)

2024-04-28(0)

2024-04-27(56)

2024-04-26(39)

2024-04-25(22)

2024-04-24(36)

2024-04-23(26)

2024-04-22(39)