原生JS實現全選，反選

時間 2019-11-10

原文原文鏈接

第一篇博客，先記錄下簡單的原生JS實現全選，反選功能。html

無樣式，比較醜this

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var arr=document.getElementsByName("a");
//全選
var btn=document.getElementsByName("b")[0];
btn.onclick=function(){
for(var i=0; i<arr.length; i++){
arr[i].checked=this.checked;
}
}
//反選
var btn2=document.getElementsByName("c")[0];
btn2.onclick=function(){
for(var i=0; i<arr.length; i++){
arr[i].checked = !arr[i].checked;
}
}
//取出所選值
var btn3=document.getElementsByName("d")[0];
btn3.onclick=function(){
var str="";
for(var i=0; i<arr.length; i++){
if( arr[i].checked ){
str+=arr[i].value+"; "
}
}
alert(str);
}
/*
!指取反，返回布爾類型
*/
}
</script>
</head>
<body>htm

<input type="checkbox" name="a" value="1" />1
<input type="checkbox" name="a" value="2" />2
<input type="checkbox" name="a" value="3" />3
<input type="checkbox" name="a" value="4" />4ip

<br>
<input type="checkbox" name="b" />全選
<br>
<input type="button" name="c" value="反選" />
<br>
<input type="button" name="d" value="取出所選值" />get

</body>
</html>input

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。