すべて選択してcheckboxスタイルを変更
13748 ワード
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> title>
<style>
#myCheck1 + label{
background-color: white;
border-radius: 5px;
border:1px solid #dbdbdb;
width:20px;
height:20px;
display: inline-block;
text-align: center;
vertical-align: text-top;
margin-left: -22px;
line-height: 20px;
}
#myCheck1:checked + label:after{
content: "\2714";
color: #8bbd26;
border: 1px solid #8bbd26;
background-color: white;
border-radius: 5px;
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
margin-left: -1px;
line-height: 20px;
}
style>
head>
<body>
<input type="checkbox" id="myCheck1">
<label for="myCheck1">label>
<div id="list">
<input type="checkbox" name="" value=""><span> span>
<input type="checkbox" name="" value=""><span> span>
<input type="checkbox" name="" value=""><span> span>
<input type="checkbox" name="" value=""><span> span>
div>
body>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">script>
<script>
var all = document.getElementById("myCheck1");
var tbody = document.getElementById("list");
var checkboxs = tbody.getElementsByTagName("input");
all.onclick = function() {
for (var i = 0; i < checkboxs.length; i++) {
var checkbox = checkboxs[i];
checkbox.checked = this.checked;
}
};
for (var i = 0; i < checkboxs.length; i++) {
checkboxs[i].onclick = function() {
var isCheckedAll = true;
for (var i = 0; i < checkboxs.length; i++) {
if (!checkboxs[i].checked) {
isCheckedAll = false;
break;
}
}
all.checked = isCheckedAll;
};
}
script>
html>転載先:https://www.cnblogs.com/jinsuo/p/9415422.html