您的位置：首页 > Web前端 > JavaScript

JS-001-单选复选按钮操作

2015-07-14 18:52 633 查看

此文主要针对 web 页面中常见元素（例如：单选按钮、复选按钮）的 JavaScript 操作，进行简单的源码示例演示，敬请小主们参阅。若有不足之处，敬请大神指正，不胜感激！

话不多言了，直接上码：

<html>
<head>
<meta charset='utf-8'>

<title>JS-001-单选复选按钮操作</title>

<link rel="stylesheet" type="text/css" href="global.css">
</head>

<body>
<div id="single">
<h4>单选项操作：</h4>
<li>获取 radio 列表：document.getElementById('radio')</li>
<li>点击 radio 列表第二项：document.getElementById('radio').children[3].click()</li>
<li>查看 radio 列表第二项的选中状态：document.getElementById('radio').children[3].checked</li>

<form id="radio">
<label>评级：</label>
<input type="radio" name="level" value="0"></input><label>特等</label>
<input type="radio" name="level" value="1"></input><label>优秀</label>
<input type="radio" name="level" value="2"></input><label>中等</label>
<input type="radio" name="level" value="3"></input><label>一般</label>
</form>
</div>

<div id="multi">
<h4>复选项操作：</h4>
<li>获取 checkbox 列表：document.getElementById('checkbox')</li>
<li>点击 checkbox 列表的第二个元素：document.getElementById('checkbox').children[1].click()</li>
<li>查看 checkbox 的项的选中状态：document.getElementById('checkbox').children[0].checked</li>

<form id="checkbox">
<label>选修：</label>
<input type="checkbox" name="level" value="0"><label>太极</label>
<input type="checkbox" name="level" value="1"><label>散打</label>
<input type="checkbox" name="level" value="2"><label>钢琴</label>
<input type="checkbox" name="level" value="3"><label>舞蹈</label>
<input type="checkbox" name="level" value="4"><label>二胡</label>
</form>
</div>

<div>
<br><br><br><br>
<a href="http://www.w3school.com.cn/jsref/dom_obj_style.asp" target="_blank">HTML DOM Style 对象</a>
</div>
</body>
</html>

将上述的源码保存至 html 文件中，用 Chrome 浏览器打开后，如下图所示：

执行相应的 js 脚本后，显示如下：

至此， JS-001-单选复选按钮操作 顺利完结，希望此文能够给初学 JavaScript 的您一份参考。

最后，非常感谢亲的驻足，希望此文能对亲有所帮助。热烈欢迎亲一起探讨，共同进步。非常感谢！ ^_^

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航