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 意見:

張貼留言