小博老師演示經常使用JQuery效果 ——複選框全選和反選效果

時間 2019-11-11

標籤老師演示經常使用 jquery 效果複選框全選欄目 JQuery 简体版

原文原文鏈接

[理論知識]javascript

咱們在實際開發應用程序的過程當中，常常會遇到複選框全選和反選的效果需求，本文小博老師就爲你們演示一下，如何使用JQuery框架實現複選框全選和反選的效果。java

[步驟解讀一]界面佈局jquery

首先咱們建立一個HTML頁面，核心代碼以下：數據庫

<body>瀏覽器

<div align="center" id="div_document">框架

<div align="left" id="div_document_content">佈局

<table align="center" border="1px" cellpadding="2px" cellspacing="2px">this

<tr>spa

<td><input type="checkbox" id="cbxAll" /></td>設計

</tr>

<tr>

<td>JavaSE標準版</td>

</tr>

<tr>

<td>JavaWeb設計</td>

</tr>

<tr>

<td>SQL結構化數據庫</td>

</tr>

<tr>

<td>JavaEE標準版</td>

</tr>

<tr>

<td>Android應用</td>

</tr>

<tr>

<td>就業輔導專題</td>

</tr>

</table>

</div>

</body>

使用瀏覽器訪問，看到頁面佈局效果以下：

[步驟解讀二]添加全選和反選效果

爲了讓用戶選擇選項更加方便，咱們把最上邊的複選框做爲功能型複選框，當用戶選中它時，全部的課程都自動選中，當用戶取消它的選中屬性後，全部的課程自動取消選中屬性。

咱們爲頁面增長javascript代碼，核心代碼以下：

$(document).ready(function(){

// 爲功能複選框添加點擊事件

$("#cbxAll").click(function(){

// 將全部課程複選框的選中屬性設置成與功能複選框的選中屬性一致

$(".cbxGroup").attr("checked",$(this).attr("checked"));

});

</script>

經過瀏覽器訪問，如今咱們看到功能複選框的全選和反選效果就實現了：

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。