操作checkbox

来源：互联网发布：恢复断开的网络驱动器编辑：程序博客网时间：2024/06/05 04:25

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>checkbox用法</title>
    <script type="text/javascript" src="jquery-1.2.1.js"></script>
    <script>
        //第一种选中的方式 : 根据元素的ID获取元素   id不能重复所以直接查找到的是元素本身
        function selectByID() {
            document.getElementById("c1").checked = true;
        }
        function unselectByID() {
            document.getElementById("c1").checked = false;
        }
        function getStatusByID() {
            alert(document.getElementById("c1").checked ? true : false);
        }

        //第二种选中的方式 : 根据元素的名称获取元素元素的名称可以重复,所以如果想要精确的找到某个元素必须要加上它的下标
        function selectByN() {
            document.getElementsByName("c1")[0].checked= true;
        }
        function unselectByN() {
            document.getElementsByName("c1")[0].checked = false;
        }
        function getStatusByN() {
            alert(document.getElementsByName("c1")[0].checked ? true : false);
        }
    </script>

</head>
<body>
<input type="checkbox" id="c1" name="c1"><br>
通过元素的ID进行操作<br>
<a href="#" onclick="selectByID()">选中</a><br>
<a href="#" onclick="unselectByID()">不选</a><br>
<a href="#" onclick="getStatusByID()">获取当前的状态</a>
<hr>
通过元素的名称进行操作<br>
<a href="#" onclick="selectByN()">选中</a><br>
<a href="#" onclick="unselectByN()">不选</a><br>
<a href="#" onclick="getStatusByN()">获取当前的状态</a>
</body>
</html>