ホームページ > 記事 > ウェブフロントエンド > JavaScript は単純な全選択関数と逆選択関数を実装します_JavaScript スキル
JavaScript は単純な全選択関数と逆選択関数を実装します_JavaScript スキル
- WBOYオリジナル
- 2016-05-16 15:21:401420ブラウズ
この記事の例では、簡単な全選択と逆選択関数を実装するための JavaScript の詳細なコードを説明します。具体的な内容は次のとおりです。
レンダリング:
特定のコード:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选</title>
</head>
<body>
<input type="button" value="全选" id="all">
<input type="button" value="反选" id="reverse">
<input type="checkbox" id="flagCheck">
<ul id="checkboxList">
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
</ul>
<p>
布尔属性，只要name即可，值可为空
checked,selected,readonly,disabled....
</p>
<script type="text/javascript">
//1.找节点
var allBtn = document.querySelectorAll("#all")[0];
var reverseBtn = document.querySelector("#reverse");
var flagCheck = document.getElementById("flagCheck");
var checkList = document.querySelectorAll("#checkboxList input");
function checkAll() {
for(var j = 0; j < checkList.length; j++) {
if(!checkList[j].checked) {
break;
}
}
if(j == checkList.length) {
// alert("全部为真")
flagCheck.checked = true;
}else {
// alert("至少一个不为真");
flagCheck.checked = false;
}
}
//2.加事件
//全选
allBtn.onclick = function() {
if(flagCheck.checked) {
flagCheck.checked = false;
for(var i = 0; i < checkList.length; i++) {
checkList[i].checked = false;
}
}else {
flagCheck.checked = true;
for(var i = 0; i < checkList.length; i++) {
checkList[i].checked = true;
}
}
}
//反选
reverseBtn.onclick = function() {
for(var i = 0; i < checkList.length; i++) {
if(checkList[i].checked) {
checkList[i].checked = false;
}else {
checkList[i].checked = true;
}
}
//执行检查所有checkList是否被选上了
checkAll();
}
for(var i = 0; i < checkList.length; i++) {
checkList[i].onclick = checkAll;
}
</script>
</body>
</html>
この記事が JavaScript プログラミングを学習するすべての人に役立つことを願っています。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。