2015年4月29日

jQuery：製作全選和取消全選核取方框的語法

      , ,  

這篇文章會說明如何透過jQuery使得核取方框全選或取消全選的方法。


jQuery
.prop( )：用來獲取或改變某property的值，常用的方式為.prop(property,value)。
.each( )：有幾個被選取的elements就跑幾次。

HTML 語法撰寫

我們先製作一個簡單的表單，裡面包含幾個的核取方塊，像這樣：


語法是這樣：
<body>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="CheckAll" value="核取方塊" id="CheckAll" />
      全選以下</label>
    <br />
    ------------------<br />
  </p>
  <p>
    <label>
      <input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_0" />
      機車</label>
    <br />
    <label>
      <input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_1" />
      腳踏車</label>
    <br />
    <label>
      <input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_2" />
      公車</label>
    <br />
    <label>
      <input type="checkbox" name="Checkbox[]" value="核取方塊" id="CheckboxGroup1_3" />
      捷運</label>
  </p>
  <p>
    <input type="submit" name="button" id="button" value="送出" />
    <br />
  </p>
</form>
</body>

jQuery語法撰寫

<script>
 $(document).ready(function(){
  $("#CheckAll").click(function(){
   if($("#CheckAll").prop("checked")){//如果全選按鈕有被選擇的話（被選擇是true）
    $("input[name='Checkbox[]']").each(function(){
     $(this).prop("checked",true);//把所有的核取方框的property都變成勾選
    })
   }else{
    $("input[name='Checkbox[]']").each(function(){
     $(this).prop("checked",false);//把所有的核方框的property都取消勾選
    })
   }
  })
 })
</script>
這裡有幾個可以注意的地方：
1.首先我用.click( )這個功能，當全選（id = CheckAll）被點擊的時候，幫我判斷...

2.如果#CheckAll的這個核取方框被打勾（checked）的話，則...。
這裡面有一個函式叫做.prop( )，一般的用法是.prop(property,value)我們可以用它來讀取某property的值（value），例如($#CheckAll).prop("checked")，就可以讀出#CheckAll這個核取方框，現在是有被勾選（true）或沒有被勾選（false）。

3.則...把所有核取方框都打勾。
選擇所有核取方框的方法比較特別，要用input[name='Checkbox[ ]']，這個name就是你希望被打勾的核取方框。這裡面有一個叫做.each( )，意思類似有幾個（selector）就跑幾次，所以我們有幾個CheckBox就會跑幾次（這裡似乎可以不用用到each，見後面的註）。
把所有核取方框打勾或取消的方法一樣是用.prop( )，透過給予true或false的值，來改變選取或取消。

註

實際測試了一下，發現似乎不使用each也可以達到一樣的效果，寫法如下：
<script>
 $(document).ready(function(){
  $("#CheckAll").click(function(){
   if($("#CheckAll").prop("checked")){//如果全選按鈕有被選擇的話（被選擇是true）
    $("input[name='Checkbox[]']").prop("checked",true);//把所有的核取方框的property都變成勾選
   }else{
    $("input[name='Checkbox[]']").prop("checked",false);//把所有的核取方框的property都取消勾選
   }
  })
 })
</script>

參考資料

wu-boy

0 意見:

張貼留言