广告
返回顶部
首页 > 资讯 > 前端开发 > html >jquery如何去掉radio单选框的选中状态
  • 334
分享到

jquery如何去掉radio单选框的选中状态

2024-04-02 19:04:59 334人浏览 八月长安
摘要

这篇文章主要讲解了“Jquery如何去掉radio单选框的选中状态”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何去掉radio单选框的选中状

这篇文章主要讲解了“Jquery如何去掉radio单选框的选中状态”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何去掉radio单选框的选中状态”吧!

3种方法:1、用removeAttr()去除radio框的checked属性,语法“单选框对象.removeAttr("checked");”。2、用attr()将checked属性的值设置为false,语法“对象.attr("checked",false)”;3、用prop()将checked属性的值设置为false,语法“对象.prop("checked",false)”。

jquery如何去掉radio单选框的选中状态

教程操作环境:windows7系统、jquery3.6.0版本、Dell G3电脑。

jquery去掉radio单选框选中状态的3种方法

方法1:使用removeAttr()

radio单选框的选中状态是由checked属性控制的,只需使用removeAttr()去掉该属性即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery.min.js"></script>
		<script>
			$(document).ready(function(){
				$("button").click(function(){
					$("input").removeAttr("checked");
				});
			});
		</script>
		<style>
			p{
				width: 200px;
				height: 100px;
				border: 1px solid #AFEEEE;
				background-color: #AFEEEE;
			}
		</style>
	</head>
	<body>

		<input type="radio" name="radio1" value="value1" />选项1<br>
		<input type="radio" name="radio1" value="value2" checked />选项2<br>
		<input type="radio" name="radio1" value="value3" />选项3<br><br>
		<button>去掉radio选中状态</button>

	</body>
</html>

jquery如何去掉radio单选框的选中状态

方法2:使用attr()

也可使用attr()将radio单选框的checked属性设置为false值来取消radio选中。

$(document).ready(function(){
	$("button").click(function(){
		$("input").attr("checked",false);
	});
});

jquery如何去掉radio单选框的选中状态

方法3:使用prop()

也可使用prop()将radio单选框的checked属性设置为false值。

$(document).ready(function(){
	$("button").click(function(){
		$("input").prop("checked",false);
	});
});

jquery如何去掉radio单选框的选中状态

感谢各位的阅读,以上就是“jquery如何去掉radio单选框的选中状态”的内容了,经过本文的学习后,相信大家对jquery如何去掉radio单选框的选中状态这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

--结束END--

本文标题: jquery如何去掉radio单选框的选中状态

本文链接: https://www.lsjlt.com/news/98032.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jquery如何去掉radio单选框的选中状态
    这篇文章主要讲解了“jquery如何去掉radio单选框的选中状态”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jquery如何去掉radio单选框的选中状...
    99+
    2022-10-19
  • jQuery如何获取单选按钮radio选中值与去除所有radio选中状态
    这篇文章将为大家详细讲解有关jQuery如何获取单选按钮radio选中值与去除所有radio选中状态,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。如下所示:喜欢<i...
    99+
    2022-10-19
  • vue中radio单选框如何实现取消选中状态问题
    目录vue radio单选框如何取消选中状态客户需求如何获取radio的选中值 、选中状态方法1方法2总结vue radio单选框如何取消选中状态 客户需求 单选radio选中后,再...
    99+
    2023-05-20
    vue中radio单选框 radio单选框取消选中状态 radio单选框选中状态
  • jquery如何获取单选框的状态
    使用jquery获取单选框状态的方法:1.新建html项目,引入jquery;2.创建input单选框,设置id属性;3.通过id获取input对象,使用prop("checked")方法获取单选框状态;具体步骤如下:首...
    99+
    2022-10-13
  • layui如何清除radio的选中状态
    这篇文章主要介绍了layui如何清除radio的选中状态,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。出现一种情况在方案二中产生了默认勾选,...
    99+
    2022-10-19
  • jquery如何获取radio选中的值
    使用jquery获取radio选中值的方法:1.新建html项目,引入jquery;2.创建input单选框;3.添加button按钮,绑定onclick点击事件;4.通过checked选择器获取对象,使用val()方法获取radio选中的...
    99+
    2022-10-17
  • jquery如何设置单选框为选中
    这篇文章主要介绍“jquery如何设置单选框为选中”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jquery如何设置单选框为选中”文章能帮助大家解决问题。方法1:使用.prop()方法.prop()...
    99+
    2023-07-06
  • AngularJS如何实现单选框及多选框的双向动态绑定
    这篇文章给大家分享的是有关AngularJS如何实现单选框及多选框的双向动态绑定的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。AngularJS 在 <input type...
    99+
    2022-10-19
  • jQuery如何获取选中的下拉框
    小编给大家分享一下jQuery如何获取选中的下拉框,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!获取选中的下拉框$(docume...
    99+
    2022-10-19
  • vue如何实现动态的选中状态切换效果
    目录动态选中状态切换效果vue状态转换状态展示动态选中状态切换效果  HTML中的内容为以下。 <ul class="list">      <li v-...
    99+
    2022-11-13
  • jQuery如何选取所有复选框被选中的值并用Ajax异步提交数据
    这篇文章将为大家详细讲解有关jQuery如何选取所有复选框被选中的值并用Ajax异步提交数据,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。示例:首先,我做了一个简单的多个...
    99+
    2022-10-19
  • html页面中的单选框功能如何实现
    本文小编为大家详细介绍“html页面中的单选框功能如何实现”,内容详细,步骤清晰,细节处理妥当,希望这篇“html页面中的单选框功能如何实现”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新...
    99+
    2022-10-19
  • 如何解决vue-cli 默认路由再子路由选中下的选中状态问题
    小编给大家分享一下如何解决vue-cli 默认路由再子路由选中下的选中状态问题,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!vue-cli是Vue.js官方脚手架命令行工具,我们可以用它快...
    99+
    2022-10-19
  • 如何使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
    这篇文章给大家分享的是有关如何使用element-ui的el-menu导航选中后刷新页面保持当前选中状态的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。具体代码如下所示:<e...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作