取消选中单选框radio的三种方式示例介绍

最新推荐文章于 2024-01-18 08:56:55 发布
最新推荐文章于 2024-01-18 08:56:55 发布
阅读量471 收藏
点赞数
分类专栏： 脚本编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TCS1164/article/details/17525783
版权
本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的。
 代码如下:

<!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(){
//
var $browsers = $("input[name=browser]");
var $cancel = $("#cancel");
var $byhide = $("#byhide");
var $remove = $("#remove");
//
$cancel.click(function(e){
// 移除属性,两种方式都可
//$browsers.removeAttr("checked");
$browsers.attr("checked",false);
});
//
$byhide.click(function(e){
// 切换到一个隐藏域,两种方式均可
//$("#hidebrowser").attr("checked",true);
$("#hidebrowser").attr("checked","checked");
});
//
$remove.click(function(e){ 点击打开链接
// 直接去的DOM元素,移除属性
// 如果不使用jQuery,则可以移植此方式
var checkedbrowser=document.getElementsByName("browser");
/*
$.each(checkedbrowser, function(i,v){
v.checked = false;
v.removeAttribute("checked");
});
*/
//
var len = checkedbrowser.length;
var i = 0;
for(; i < len; i++){
// 必须先赋值为false,再移除属性
checkedbrowser[i].checked = false;
// 不移除属性也可以
//checkedbrowser[i].removeAttribute("checked");
}

});
});
</script>
</head>
<body>
<p>您喜欢哪款浏览器？</p>
设计之家http://www.dehome.net/

<form>
<input style="display:none;" id="hidebrowser" type="radio" name="browser" value="">
<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 />
<br />
<input type="button" id="cancel" value="取消选中方式1" size="20">
<input type="button" id="byhide" value="取消选中方式2" size="20">
<input type="button" id="remove" value="取消选中方式3" size="20">
</form>

</body>
</html>
GMY20
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
取消选中单选框radio的三种方式
weixin_33958585的博客
12-21 3194
作者: 铁锚 日期: 2013年12月21日 本文提供了三种取消选中radio的方式，代码示例如下: 本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的。 <!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</titl...
单选按钮(radio)的取消与选中
07-10
js控制单选按钮(radio)的取消与选中，javascript单选按钮
jsp双击radio取消选中
guwh
02-07 369
&lt;table width="80%" border="1"&gt; &lt;tr&gt; &lt;td &gt; 是 &lt;input name="radiobutton1" type="radio" value="20" onclick="isCheck(this);" /&gt;
实现radio单选框单击取消选中状态
JJ_Smilewang的博客
11-17 5572
后面的单选框只能三选一，并且也可以全部不选，同时如果选中了其中一个后，也可以取消，最终可以回到全部不选的状态。
js radio选中跟取消选中
最新发布
YY_Ylx_XX的博客
01-18 894
js设置radio选中 : $("#radio1").attr("checked","checked"); 取消选中：$("#radio2").removeAttr("checked");
三种取消选中单选框radio的方法
09-04
本文将详细讨论三种取消选中单选框radio的方法，这些方法包括使用jQuery来实现的两种方式，以及基于JavaScript和DOM实现的第三种方式。 首先，需要了解的是，单选框的选中状态是由其checked属性决定的，该属性为...
微信小程序如何实现radio单选框单击打勾和取消
11-21
在微信小程序中，实现`radio`单选框的单击打勾和取消功能，主要涉及到对`radio`组件的使用和样式自定义。下面将详细解释这个过程。 首先，微信小程序中的`radio`组件用于创建单选按钮，它提供了一种用户只能在多个...
Jquery选中或取消radio示例
10-26
在文档中提到的“选中或取消radio示例”部分，具体操作是通过`.attr()`方法来实现的： ```javascript $("#tradeType0").attr("checked","checked"); $("#tradeType1").attr("checked",false); ``` 这里，`$("#...
el-radio单选框，取消选中
lovecoding1的博客
11-11 5696
el-radio单选框，取消选中～
Elementui Radio单选框取消选中
H524268015wsw的博客
01-08 2670
1.两种方法都可以达到取消选中的要求。2.不在意样式的选用第一种，要求样式的选择第二种。
radio单选按钮de选中与取消
weixin_30732487的博客
05-18 124
1 <!DOCTYPE HTML> 2 <html> 3 <meta charset="UTF-8"> 4 <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" /> 5 <head> 6 ...
实现radio取消选中的功能
高彬的专栏
09-29 8543
如下图，当有一组radio，如果选中一个后，默认必须选中其中一个，如何才能实现取消选中所有项呢？ 最好的操作习惯是再次点击选中项 自动取消选中状态，但是默认情况下，点击选中的radio，还是选中状态 ，下面我们通过js改变这种默认形为，以达到点击选中项自动 取消选择的目的： html: <label class="ms-radio ms-radio-default"> <input type="radio" name="a">nano卡 </label&gt..
js radio取消选中
weixin_38938932的博客
10-18 5250
$(document).ready(function () { $("input[type=radio]").click(function () { if ($(this).attr("tag") == 1) { $(this).attr("checked", false); $(this).a...
radio 任意取消选中状态
qq_41117492的博客
10-09 549
/重复点击已经checked的radio时，将dmhakkoukubunBeforeval的值置为空，并触发change事件。//重复点击，手动触发change事件时，将radio组的check去掉。//radio组的change事件，此事件在click事件之后触发。<%--记录radio变更成功后的值，初始值为空--%>//正常点击，正常赋值。//radio的click事件。
js取消单选按钮选中 判断对象是否为空
iteye_8029的博客
11-13 120
一组单选按钮name都为country var country = document.getElementsByName('country'); for(var i=0;i&lt;country.length;i++){ if(country[i].checked) { country[i].checked=false; //不选中 } } &lt;c:if...
单选框单击取消选中
AE_yang的博客
10-28 7552
单选框，选中之后是无法取消选择的，必然有选中项。 如果为必填项，不会存在问题，实际情况是：有可能是非必填项，现在想取消选择。 客户实际是配置了一项‘未知’来表示无值的情况。 有如下考虑： 1.改为下拉框，添加一项‘请选择’，特定值，后台过滤。 2.改为多选框，通过js限制只能选一项。 3.单击选中的单选框，取消选中。 想当然的代码 1 2 3 4 5 $("input[type='radio']").click(functio..
单个el-radio点击选中取消
m0_37328953的博客
03-06 3886
使用正常的点击事件是无法触发的，所以要使用**@click.native.prevent**，这样就可以触发按钮的点击事件，不过通过点击事件来处理一些逻辑的时候，就无法触发自带的@input事件。el-radio中，已经选中的按钮无法通过再次点击去取消选择，所以要满足条件需要改变成对应的点击事件。
elementui单选框radio，点击单选框取消选中
05-10
如果你想实现点击单选框取消选中，可以通过给单选框绑定点击事件，在事件处理函数中判断当前单选框是否已经选中，如果已经选中则取消选中，如果未选中则选中。 以下是一个示例代码： ```html <template> <div> <el-radio v-model="radio" @click="handleClick">选项一</el-radio> <el-radio v-model="radio" @click="handleClick">选项二</el-radio> <el-radio v-model="radio" @click="handleClick">选项三</el-radio> </div> </template> <script> export default { data() { return { radio: '' } }, methods: { handleClick(event) { const target = event.target const currentValue = this.radio if (target.classList.contains('is-checked')) { this.radio = '' } } } } </script> ``` 在上面的代码中，我们给每个单选框绑定了点击事件，事件处理函数中通过判断当前单选框是否已经选中来实现取消选中的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值