jQuery實現表格的checkbox全選/取消全選

阿新 • • 發佈：2019-02-02

效果圖這裡寫圖片描述
將jquery.js檔案放到專案中對應的位置即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gbk">
        <title>員工列表</title>
        <style type="text/css" 
>
table {
    border: 1px solid black;
    border-collapse: collapse;
}

table thead tr th {
    border: 1px solid black;
    padding: 3px;
    backgroud-color: #cccddd;
}

table tbody tr td {
    border: 1px solid black;
    padding: 3px;
}
</style>

    </head>
    <script language 
="javascript" src="js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
$(function() {
    $("#all").click(function() {
        if (this.checked) {
            $('table input[type=checkbox]').attr('checked', true);
        } else {
            $('table input[type=checkbox]' 
).attr('checked', false);
        }
    });
});
</script>
    <body>
        <center>
            <h2>
                <font color="blue">員工列表</font>
            </h2>
            <table cellspacing="1">
                <thead>
                    <tr>
                        <th>
                            <input type="checkbox" id="all" />
                        </th>
                        <th>
                            編號
                        </th>
                        <th>
                            姓名
                        </th>
                        <th>
                            薪水
                        </th>
                        <th>
                            年齡
                        </th>
                        <th>
                            電話
                        </th>
                        <th>
                            地址
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>
                            1
                        </td>
                        <td>
                            sven
                        </td>
                        <td>
                            8000
                        </td>
                        <td>
                            24
                        </td>
                        <td>
                            123456
                        </td>
                        <td>
                            上海
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" />
                        </td>
                        <td>
                            2
                        </td>
                        <td>
                            luna
                        </td>
                        <td>
                            10000
                        </td>
                        <td>
                            26
                        </td>
                        <td>
                            123456
                        </td>
                        <td>
                            深圳
                        </td>
                    </tr>
                </tbody>
            </table>
        </center>
    </body>
</html>

jQuery實現表格的checkbox全選/取消全選

效果圖將jquery.js檔案放到專案中對應的位置即可。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht

jquery實現複選框checkbox全選取消全選

jsp中checkbox複選框的個數是依據從資料庫中取出值的條數決定的，是Iterator迴圈遍歷出來的。<td class="rd8"><input type="checkbox" name="selectFlag" id="selectFlag" valu

用JavaScript實現CheckBox的全選取消反選，及遮罩層中添加內容

document 當前 CI itl HA posit size classlist ML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha

JQuery實現的 checkbox 全選、反選。

發現網上寫的全選的程式碼，不是完整的，是有bug的。全選它分幾種情況 1. 全選的checkbox選中時，子checkbox全部選中。反之，全部不選 2.子checkbox中，只要有沒有被選中的，取消全選checkbox的選中 3.子checkbox的數量和子checkbo

jquery全選選中所有checkbox，再次點選取消全選，可以反覆點選，解決了點選一次後再次點選不能選中的問題

<!DOCTYPE html> <html> <head> <title>checkbox的多選</title> </head> <body> <table borde

checkbox全選/取消全選

fun log 按鈕 () odi checked input rop cti //checkbox全選/取消全選 $(function() { $("#checkAll").click(function() { if(this.checked){

表格全選取消反選

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&g

js實現複選框的全選取消全選

html虛擬碼 <table> <tr> <td><input type="checkbox" name="all" id="checkall" onclick="checkAll()" /></td>

實現全選/取消全選功能

這裡是使用jquery為前提：方法一： /** * 繫結全選/取消全選 * @param checkAll 全選複選框 * @param checkOne 單個複選框 */ functio

AngularJS--購物車全選/取消全選功能實現

剛學習angularJS，於是練習寫了一個類似於購物車的全選/取消全選的功能，主要實現的功能有： 1、勾選全選checkbox，列表資料全部被勾選，取消同理，用ng-model實現雙向繫結； 2、選中列表中的所有checkbox，全選也會被勾選；（這裡我想到的方法是給

jquery grid表格checkbox的關聯勾選與取消

處理的表格類似如下：要實現勾選A小計時，A也勾上。序號名稱隱藏id 勾選框 -10 A小計 10 -12 B小計 12 1456 A 10 1567 B 12 1777 B 12 程式碼如下： $("#aaaaContainer input[

jquery全選/取消全選(反選)/單選操作以及獲取值常見用法和錯誤-jquery prop()函式使用教程

用原生態的JavaScript操作頁面上的一組checkbox全選/取消全選，邏輯很簡單，實現程式碼也不難寫。但使用jQuery實現則非常簡單，程式碼很簡潔-write less,do more！ jquery版本：1.9 先看看HTML程式碼，很簡單的操作框 &l

黃聰：JQUERY判斷操作CHECKBOX選中、取消選中、反選、第二次無法選中的問題

clas 再次 box als 修改 api disable jquer checkbox 用JQuery做CheckBox全選和反選的時候，遇到一個問題。當用JQ控制全選，全取消一次以後，再次點擊全選，發現代碼變了，但是CheckBox沒有處於選中狀態。 $(

全選/取消全選

$("#all").change(function() { $("input[name='member_types[]']").prop("checked", true); if($(this).is(':checke

vue+element-ui實現表格checkbox單選

公司平臺利用vue+elementui搭建前端頁面，因為本人第一次使用vue也遇到了不少坑，因為我要實現的效果如下圖所示實現這種單選框，只能選擇一個，但element-ui展示的是多選框，checkbox自己也可以寫，但不想寫，還是想用element-ui實現表格單選，於是

全選,取消全選(字串拼接)

// 列表拼接 function admin_list() { $.ajax({ url: 'api/list', type: 'get', headers: { Accept: "applicatio

JQuery實現表格點選就可以修改

我們看到有些網站表格內容點選就可以直接修改，修改完後，點選回車鍵就能將修改內容顯示成表格內容，最經典的例子：QQ簽名，不點選時候看著是一段文字，點選後就能輸入，點選編輯個性簽名就能出現能夠輸入的文字框。所以在頁面中也做一個這種效果的表格思想：給表格td註冊一個onclick事件，當點選時候記住文字內容

修改tableView多選預設藍色選中按鈕 , 全選 , 取消全選

經常會有需求 , 更改tableView多選的預設按鈕顏色 , 預設為藍色 , 很多情況下可能會根據自己專案的主題色進行修改 . 簡單粗暴 , 直接上程式碼 . 重寫Cell的佈局方法 ,

jQuery實現表格行點選選中複選框

js程式碼，頁面初始化執行：$(".list tr").each(function(){ $(this).children().click(function(e){ $(e.target).parent("tr.item").each

jquery實現表格中點選相應行變色功能

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title><

jQuery實現表格的checkbox全選/取消全選

相關推薦