JavaScriptは、全選択、不選択、反選択機能を実現します.
8000 ワード
全選択ボタンをクリックすると、下のリスト項目が全部選択されます.選択しないボタンをクリックして、選択を全部キャンセルします.先にリストの中からいくつかを選択して、逆選択ボタンをクリックすると、前に選択されたものはキャンセルされ、前に選択されていなかったものは選択状態になります.
以下は実現コードです.
以下は実現コードです.
<html>
<head>
<meta charset="utf-8">
<title>hhtitle>
<script type="text/javascript">
window.onload=function(){
var oBtn1=document.getElementById('btn1');
var oBtn2=document.getElementById('btn2');
var oBtn3=document.getElementById('btn3');
var oDiv=document.getElementById('div1');
var oCh=oDiv.getElementsByTagName('input');
oBtn1.onclick=function()
{
for (var i = 0; i < oCh.length; i++)
{
oCh[i].checked=true;
}
};
oBtn2.onclick=function()
{
for (var i = 0; i < oCh.length; i++)
{
oCh[i].checked=false;
}
};
oBtn3.onclick=function()
{
for (var i = 0; i < oCh.length; i++)
{
if (oCh[i].checked==true)
oCh[i].checked=false;
else
oCh[i].checked=true;
}
};
};
script>
head>
<body>
<input id="btn1" type="button" value=" ">
<input id="btn2" type="button" value=" ">
<input id="btn3" type="button" value=" "><br>
<div id="div1">
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
<input type="checkbox" ><br>
div>
body>
html>