兩行代碼搞定checkbox全選

字號+ 編輯: 国内TP粉 修訂: 秃顶萧峰 來源: ThinkPHP 2023-09-06 我要說兩句(0)

網路轉載。

簡簡單單兩行代碼搞定checkbox全選和取消全選

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全選測試</title>
<script type=text/javascript src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<input type="checkbox" id="quanxuan" />全選<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
</body>
</html>
<script type="text/javascript">
$("#quanxuan").click(function(){
var xz = $(this).prop("checked");// 判斷全選按鈕的選中狀態
var ck = $(".qx").prop("checked",xz);  // 讓class名爲qx的選項的選中狀態和全選按鈕的選中狀態一致。
});
</script>


<sc
ript type=text/ja
vasc
ript src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></sc
ript>
</head>
<body>
<input type="checkbox" id="quanxuan" />全選<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
<input type="checkbox" class="qx" />aa<br />
</body>
</html>
<script type="text/javascript">
$("#quanxuan").click(function(){
var xz = $(this).prop("checked");/ /判斷全選按鈕的選中狀態
var ck = $(".qx").prop("checked",xz);  // 讓class名爲qx的選項的選中狀態和全選按鈕的選中狀態一致。
});
</script>
$("#quanxuan").click(function(){
var xz = $(this).prop("checked");// 判斷全選按鈕的選中狀態
var ck = $(".qx").prop("checked",xz);  // 讓class名爲qx的選項的選中狀態和全選按鈕的選中狀態一致。
});
</script>


閲完此文,您的感想如何?
  • 有用

    0

  • 沒用

    0

  • 開心

    0

  • 憤怒

    0

  • 可憐

    0

1.如文章侵犯了您的版權,請發郵件通知本站,該文章將在24小時内刪除;
2.本站標注原創的文章,轉發時煩請注明來源;
3.交流群: 2702237 13835667

相關課文
  • 上傳自定義文档的時候查如何填寫上傳表單中的access, mimeType等字段值

  • HTML5+CSS3——第6章 HTML5表單標簽,與瀏覽者交互

  • HTML5+CSS3——第5章 HTML5圖片、鏈接及表格標簽

  • HTML5+CSS3——第4章 HTML5列表標簽

我要說說
網上賓友點評