Js_Checkbox全选反选案列

代码:

<!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>

效果:
Js_Checkbox全选反选案列_第1张图片

你可能感兴趣的:(checkbox)