JavaScript练习 - 正反选练习

时间:2023-03-09 21:22:10
JavaScript练习 - 正反选练习

正反选练习

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div>
<input type="button" value="全选" onclick="f1()">
<input type="button" value="反选" onclick="f2()">
<input type="button" value="取消" onclick="f3()"> <ul>
<li><input type="checkbox">aaaaa</li>
<li><input type="checkbox">aaaaa</li>
<li><input type="checkbox">aaaaa</li>
<li><input type="checkbox">aaaaa</li>
<li><input type="checkbox">aaaaa</li>
<li><input type="checkbox">aaaaa</li>
</ul>
</div> <script src="jquery-1.12.4.min.js"></script>
<script>
// function f1(){
// $(':checkbox').each(function () {
// $(this).prop('checked',true)
// })
// }
function f1(){
$(':checkbox').prop('checked',true);
}
function f2(){
$(':checkbox').each(function () {
if ($(this).prop('checked')){
$(this).prop('checked',false)
}
else {
$(this).prop('checked',true)
}
})
}
function f3(){
$(':checkbox').removeProp("checked");
}
</script>
</body>
</html>