使用 js 设置chexkbox 为选中或者未选中状态

满天丄星

于 2023-01-30 19:43:57 发布

阅读量1.1k

点赞数 1

分类专栏：学习之路文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_57197323/article/details/128807446

版权

学习之路专栏收录该内容

3 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

问题描述

一、问题描述
二、解决思想
- 2.代码示例
效果
- 当url为 http://127.0.0.1:8848/ServerLess/test.html 时该按钮会被默认选中

		解决办法，首先使用 pathname()方法获取url路径，再根据url判断 chexkbox 是否被选中
		由于 input 标签中一旦加入 chexkbox 属性，无论属性值为 “”，“true”，"false" ，chexkbox都会认为是勾选，所以这里不会再 input 标签定义时加入 chexkbox属性

一、问题描述

想要根据url路径访问的 servelt 方法名不同，进入页面后决定 checkbox是否被选中.

二、解决思想

首先使用 pathname()方法获取url路径，再根据url判断 chexkbox 是否被选中
由于 input 标签中一旦加入 chexkbox 属性，无论属性值为 “”，“true”，“false” ，chexkbox都会认为是勾选，所以这里不能在 input 标签定义时加入 chexkbox属性，而是根据url判断条件为 input 加入自定义属性 chenkbox
另一种解决办法是可以使用 Jquery解决，这里演示如何使用 JS 自定义属性解决

2.代码示例

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS设置checkbox 为选中和未选中状态</title>
	</head>
	<body>
		<input type="checkbox" name="running" id="pitch"/>
		
		<script>
			// 获取url  获取 全url后 使用 split 方法切取方法名
			let path = window.location.pathname.split("/")[2];
			// 获取input  dom对象
			obj = document.getElementById("pitch");
			// 如果path为 test.html input默认勾选
			if(path == 'test.html'){
				// 自定义属性
				var checked =document.createAttribute("checked");
				checked.nodeValue="checked"
				// 为dom对象加入属性
				obj.attributes.setNamedItem(checked)
			}
		</script>
	</body>
</html>