【前端】複選框全選實現方法

阿新 • • 發佈：2019-01-13

這裡寫圖片描述

原始碼

<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
        <script>
            $(document).ready(function(){
                $("[name='allSel']").click(function(){
                    if 
($(this).is(':checked')){
                        $("[name='select']").attr('checked',true);
                    }else{
                        $("[name='select']").attr('checked',false);
                    }
                })
                $("[name='select']").click(function(){
                    var 
 allSel = false;
                    $("[name='select']").each(function(){
                        if(!$(this).is(':checked')){
                            allSel = true;
                        }
                    })
                    if(allSel){
                        $("[name='allSel']").attr('checked' 
,false);
                    }else{
                        $("[name='allSel']").attr('checked',true);
                    }
                })
            });
        </script>
    </head>
    <body>
        <input type="checkbox" name="allSel" />全選
        <hr />
        <input type="checkbox" name="select" value="1"/>1</br>
        <input type="checkbox" name="select" value="2"/>2</br>
        <input type="checkbox" name="select" value="3"/>3</br>
        <input type="checkbox" name="select" value="4"/>4</br>
        <input type="checkbox" name="select" value="5"/>5</br>
    </body>
</html>

參考講解程式碼

【前端】複選框全選實現方法

原始碼 <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.7.1.min.js

【JS】用checked實現複選框全選和全不選

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf8"> <title>無標題文件</title>

【js】趙雅智_js複選框全選反選全不選案例

html介面：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>nameNode.html</title>

複選框全選

js 複選框全選都選如果某一個子複選框沒選中則全選按鈕不選中

<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>YuGiOh</title> <style type="text/css"> </style&

layui 複選框全選

<input type="checkbox" name="all" title="全選" lay-filter="allChoose"> //複選框全選 form.on('checkbox(allChoose)',function (data) {

複選框全選全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> functi

js實現複選框全選/全不選/反選

js實現複選框全選/全不選/反選 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &

JQuery 實現複選框全選反選功能

HTML部分 <body> <input type="checkbox" name="fu">全選(父)<br> <input type="checkbox" name="zi">子1<br> <input ty

Jquery 複選框全選、反選

$("#checkall").click( function(){ if(this.checked){ $("input[name='total']").each(function(){this.checked=true;});

（車站線上售票系統）複選框全選以及批量刪除

一丶複選框全選當點選最頂上的全選/全不選 checkbox時,下面的一列要跟隨著解決方法:用js function checkAll(){ //獲取(全選/全不選) 複選框的checked值 var flag=docu

jquery實現複選框全選全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>使用jQuery完成複選框的全選和全不選</title> <script t

原生js實現複選框全選全不選

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>全選和全不選</title> <script> function

jquery複選框全選全不選

// 複選框的全選和全不選 $(function() { // 獲得上面的複選框 var $selectAll = $("#selectAll"); // alert($selectAll.prop("checked")); // 返回undefined未定義 $se

一週亂彈(1,bootstrap 同時展示多個模態框順序2.複選框全選例子)

1,bootstrap 同時展示多個模態框順序頁面: <%--模板--%> <div class="modal fade" id="userDepartModal"

複選框全選和反選例子

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascri

jquery和js分別實現獲取checkbox的值+jquery實現複選框全選

//jquery實現全選 $(function(){ $("#checkAll").click(function(){ $(".checkOne").attr("checked",this.checked) }) }) //批量刪除jquery實現提示 function p_d

jQuery 複選框全選和清空

html程式碼： <div class="checkbox-custom" style="height:32px;line-height:32px;"> <input id="Appleid" name="Apple" class="checkboxstyle" type="

關於複選框全選，全不選以及使用按鈕傳值

在複選框全選，以及選其中的幾個進行傳值，有以下思路，把每個複選框的值，使用字串累加，用逗號將其隔開程式碼如下 function checkAll() { var id = document.getElementById("all"); var name = do

javasctipt實現-複選框全選/反選的實現

以下是用原生js實現的複選框全選/反選的實現選中checkbox的時候，實現全選的效果，並且樣式發生改變。程式碼最簡潔，js行為優化版，複製貼上即可使用。 ** <!DOCTYPE

【前端】複選框全選實現方法

相關推薦