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

Js_Checkbox全选反选案列

2015-04-14 22:49 381 查看

代码：

<!DOCTYPE html>
<html>
<head>
<title>checkboxs.html</title>

<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">
    //select 不行

    function selects(value) {
        //获取所有的 name=fav的<input type="checkbox" name="fav" value="java1"/>对象的集合
        var favsDom = document.getElementsByName("fav");
        if (value == 0) {
            for (var i = 0; i < favsDom.length; i++) {
                var favDom = favsDom[i];//获取具体的对象
                if (favDom.checked) {
                    favDom.checked = false;
                }
            }
        } else if (value == 1) {
            for (var i = 0; i < favsDom.length; i++) {
                var favDom = favsDom[i];//获取具体的对象
                if (!favDom.checked) {
                    favDom.checked = true;
                }
            }
        } else if (value == -1) {
            for (var i = 0; i < favsDom.length; i++) {
                var favDom = favsDom[i];//获取具体的对象
                favDom.checked = !favDom.checked;
            }
        }

    }
</script>
</head>

<body>
    <div>
        <input type="checkbox" name="fav" value="java1" />java1<br /> <input
            type="checkbox" name="fav" value="java2" />java2<br /> <input
            type="checkbox" name="fav" value="java3" />java3<br /> <input
            type="checkbox" name="fav" value="java4" />java4<br /> <input
            type="checkbox" name="fav" value="java5" />java5<br /> <input
            type="checkbox" name="fav" value="java6" />java6<br />
    </div>

    <div>
        <input type="button" id="qx" value="全选" onclick="selects(1)" /> <input
            type="button" id="fx" value="反选" onclick="selects(-1)" /> <input
            type="button" id="qbx" value="全不选" onclick="selects(0)" />
    </div>

</body>
</html>

效果：

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

标签：

相关文章推荐

新的分享

章节导航