jquery table下的核取方塊選中、取消

airland發表於2021-09-09
jQuery

         

<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>首頁</title><!-- 新 Bootstrap 核心 CSS 檔案 --><link rel="stylesheet" href="../../../css/bootstrap.min.css"><!-- jQuery檔案。務必在bootstrap.min.js 之前引入 --><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../../js/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 檔案 --><script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="../../../js/bootstrap.min.js"></script><script language="javascript">$().ready(function() {    $("input[id=all]").click(function(){        var allchecked = this.checked;        var arr = $(this).parent().parent().parent().find("input");        for(var i = 1;i<arr.length;i++){            arr[i].checked = allchecked;        }    });        $("input[id=inlineCheckbox1]").click(function(){        var arr = $(this).parent().parent().parent().find("input");        for(var i = 1;i<arr.length;i++){            if(arr[i].checked){                arr[0].checked = true;                    return;            }        }                var arr2 = $(this).parent().parent().parent().find("input[checked=true]");        if(arr2.length ==0){        arr[0].checked = false;            }                })        });</script></head><body>  <table  class="table">      <tr>        <th>一級選單</th>        <th>二級選單</th>    </tr>    <tr><td><label class="checkbox-inline">  <input type="checkbox"  id="all" value="option1"> 系統管理</label></td>        <td>        <label class="checkbox-inline">          <input type="checkbox" id="inlineCheckbox1"  value="option1"> 使用者管理        </label>             <label class="checkbox-inline">          <input type="checkbox" id="inlineCheckbox1" value="option1"> 使用者管理        </label>     <label class="checkbox-inline">          <input type="checkbox" id="inlineCheckbox1" value="option1"> 使用者管理        </label>     <label class="checkbox-inline">          <input type="checkbox" id="inlineCheckbox1" value="option1"> 使用者管理        </label>        </td>    </tr>   <tr><td><label class="checkbox-inline">  <input type="checkbox" id="all" value="option1"> 系統管理</label></td>        <td>        <label class="checkbox-inline">          <input type="checkbox" id="inlineCheckbox1" value="option1"> 使用者管理        </label>             <label class="checkbox-inline">          <input type="checkbox" id="inlineCheckbox1" value="option1"> 使用者管理        </label>     <label class="checkbox-inline">          <input type="checkbox" id="inlineCheckbox1" value="option1"> 使用者管理        </label>     <label class="checkbox-inline">          <input type="checkbox" id="inlineCheckbox1" value="option1"> 使用者管理        </label>        </td>    </tr>  </table></body></html>


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/964/viewspace-2815552/，如需轉載，請註明出處，否則將追究法律責任。

相關文章