复选框动态取消全选或全选

注意点:jquery中.attr()只在第一次有效,第二次赋值无效,所以使用.prop赋值属性

查看复选框状态

var flag=$("#checkid").prop("checked");//判断复选框状态

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全选操作</title>
     
</head>

<body>
    <div>
    您喜欢的水果?<br /><br />
<label><input name="Fruit" type="checkbox" value="" />苹果 </label>
<label><input name="Fruit" type="checkbox" value="" />桃子 </label>
<label><input name="Fruit" type="checkbox" value="" />香蕉 </label>
<label><input name="Fruit" type="checkbox" value="" />梨 </label>
 <br/>
 </div>
<input  id="checkid" type="checkbox"  onchange="myfun()"  />全选/全不选 </label>   

 
        <script src="../js/jquery-1.12.4.min.js" type="text/javascript"></script>
        <script  type="text/javascript">
        function myfun(){
        var flag=$("#checkid").prop("checked");//判断复选框状态
        console.log(flag)
        $("div input").prop("checked",flag);
        
         
     } 
     </script>



    </body>

</html>

猜你喜欢

转载自blog.csdn.net/qq_38735996/article/details/89349801
今日推荐