jquery实现反选、全选、全不选功能

效果图如下
jquery实现反选、全选、全不选功能_第1张图片
代码


<html>
<head>
    <title>title>
    <script type="text/javascript" src="jquery-3.2.1.js">script>
    <script type="text/javascript">
        function allof() {
            $("input").prop("checked",true);
        }
        function allnot() {
            $("input").prop("checked",false);
        }
        function other() {
            $("input[name='hobby']").each(function(){
                $(this).prop("checked",$(this).prop("checked")?false:true);
            });
        }
    script>
head>
<body>
    <input type="checkbox" name="hobby" value="a"> A <hr>
    <input type="checkbox" name="hobby" value="b"> B <hr>
    <input type="checkbox" name="hobby" value="c"> C <hr>
    <input type="checkbox" name="hobby" value="d"> D <hr>
    <input type="checkbox" name="hobby" value="e"> E <hr>
    <input type="checkbox" name="hobby" value="f"> F <hr>
    <button onclick="allof()">全选button>
    <button onclick="other()">反选button>
    <button onclick="allnot()">全不选button>
body>
html>

你可能感兴趣的:(jquery)