Rumah > Artikel > hujung hadapan web > js复选框全选反选的方法

js复选框全选反选的方法

一个新手asal: 2017-09-30 09:04:382342semak imbas

本篇文章是关于复选框的，有2种形式：1、全选、反选由2个按钮实现；2、全选、反选由一个按钮实现。

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>复选框demo</title>
        <script src="../js/jquery-1.10.2.js" type="text/javascript"></script>
        <style>
            body{ text-align:center} 
            .con{ margin:100px auto; width:800px; height:400px; border:1px solid #F00; padding-top: 50px;} 
        </style> 
    </head>
    <body>
        <p class="con">
            <span><input type=&#39;checkbox&#39; name=&#39;select&#39; onclick=&#39;allSelect()&#39;>全选</span>
            <span><input type=&#39;checkbox&#39; name=&#39;cancel&#39; onclick=&#39;unAllSelect()&#39;>反选</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />苹果</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />香蕉</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />梨子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />桃子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;fruit&#39; />西瓜</span>
            
            <br><br><br>
            
            <span><input type=&#39;checkbox&#39; id="allBook"  name=&#39;allBook&#39; />全选</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />老子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />尚书</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />周易</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />诗经</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />孟子</span>
            <span><input type=&#39;checkbox&#39; name=&#39;book&#39; />中庸</span>
            <script type="text/javascript">
    //全选
    function allSelect(){
        $("input[name=&#39;fruit&#39;]").prop("checked", "checked");
        $("input[name=&#39;cancel&#39;]").removeAttr("checked");
    }    //反选
    function unAllSelect(){
        $("input[name=&#39;fruit&#39;]").removeAttr("checked");
        $("input[name=&#39;select&#39;]").removeAttr("checked");
    }    
    //单选    
            $("#allBook").click(function(){        
            if(this.checked){//            
            $("input[name=&#39;book&#39;]").attr("checked", true);            
            $("input[name=&#39;book&#39;]").prop("checked", "checked");
          }else{//          
          $("input[name=&#39;book&#39;]").attr("checked", false);            
          $("input[name=&#39;book&#39;]").removeAttr("checked");
          }
    });</script>
        </p>
    </body>
    </html>

在实践中碰到一个问题——check全选失效。解决办法，使用prop方法代替attr。

$("input[name=&#39;book&#39;]").attr("checked", "checked");
$("input[name=&#39;book&#39;]").prop("checked", "checked");

这或许是和jQuery版本有关。

Atas ialah kandungan terperinci js复选框全选反选的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：jqurey中ready的用法 Artikel seterusnya：jq优化方法

Artikel berkaitan

Lihat lagi