【JQuery操作Select標籤系列介紹】【應用篇】JQuery Select標籤連動checkbox元件

測試環境
JQuery版本	jquery-1.11.1.min.js(jquery-2.1.1.min.js也可使用), jquery-ui-1.10.4.custom.min.js
測試瀏覽器	Chrome36.0,Firefox31.0

今天要來介紹Select標籤連動checkBox的方法
為了讓大家比較容易理解這個功能的使用時機所以模擬了一個小小的範例
因為買手機可能會因為費率不同或是有活動
讓客戶在購買東西時可以選擇不同的優惠方案跟贈品
是的這邊是拿買手機時的配套方案來做為講解範例
在開始進入範例前先讓我們了解一下Select標籤中四個方案
分別會有那些優惠內容吧!

方案A
1.通話費9折優惠
2.手機保護套
3.手機吊飾
方案B
1.送300元通話費
2.手機保護套
3.全機包膜
方案C
1.上網費8折優惠
2.手機保護套
3.藍芽耳機
方案D
1.升級為VIP會員
2.全機包膜
3.藍芽耳機

以下就讓我們開始進行範例說明吧
首先我們要先建立一個Select標籤以及要連動的CheckBox(本範例中共八個CheckBox)
為了美觀我們用個Table將CheckBox選項分為兩類分別是「優惠內容」以及「贈品」兩類

<p>
方案:
<select id="sel">
  <option value="Null">請選擇</option>
  <option value="A">A方案</option>
  <option value="B">B方案</option>
  <option value="C">C方案</option>
  <option value="D">D方案</option>
</select>
(各個方案有不同的優惠項目唷)
</p>
<div id="menu">
  <table>
    <tr>
      <td>優惠內容</td>
      <td>贈品</td>
    </tr>
    <tr>
      <td id="meals">
        <input type="checkbox" id="ch1"/>通話費9折優惠
        <input type="checkbox" id="ch2"/>送300元通話費
        <input type="checkbox" id="ch3"/>上網費8折優惠
        <input type="checkbox" id="ch4"/>升級為VIP會員
      </td>
      <td id="drink">
        <input type="checkbox" id="ch21"/>手機保護套
        <input type="checkbox" id="ch22"/>全機包膜
        <input type="checkbox" id="ch23"/>手機吊飾
        <input type="checkbox" id="ch24"/>藍芽耳機
      </td>
    </tr>
  </table>
</div>

然後在用一點點CSS將Table設定一下內容樣式，這樣看起來比較正式一點

table{
  margin:20px 0 0 0;
  border-collapse:collapse;
  width:200px;
}
table td{
  border:1px solid #000;
  padding:5px;
  text-align:center;
}
#meals, #drink{  
  text-align:left;
}

最後就是要開始寫連動的部分了，細節部分請參考Code中的註解

//當Select下拉選單的值變更時觸發行為
$("#sel").change(function(){
  //抓取Select變更後的值為switch判斷條件
  switch ($(this).val()){
  case "Null": 
      //val為「Null」時執行將CheckBox全部改為未選取
      removeMenu();
      break;
  case "A":  
      removeMenu();
      //val為「A」時，將#ch1, #ch21, #ch23三個選項設為選取
      $("#ch1, #ch21, #ch23").prop("checked",true);
      break;
  case "B":  
      removeMenu();       
      //val為「B」時，將#ch2, #ch22, #ch21三個選項設為選取
      $("#ch2, #ch22, #ch21").prop("checked",true);
      break;
  case "C":  
      removeMenu();
      //val為「C」時，將#ch3, #ch21, #ch24三個選項設為選取
      $("#ch3, #ch21, #ch24").prop("checked",true);
      break;
  case "D":  
      removeMenu();
      //val為「D」時，將#ch4, #ch22, #ch24三個選項設為選取
      $("#ch4, #ch22, #ch24").prop("checked",true);
      break;
 }
});
//將所有CheckBox設定為未選取狀態
function removeMenu(){
  $("input[type='checkbox']").prop('checked', false);
}

在這邊要特別注意的事情是，有些人在變更CheckBox的選取狀態時會使用.attr()
而我這邊用的卻是.prop()(如下面的Code)

  $("input[type='checkbox']").prop('checked', false);

為什麼要這樣做能，這是因為.attr()是JQuery1.6以前的版本再使用的
JQuery1.6+以上的版本建議使用.prop()比較不會有問題
可是基本上不要把.attr()跟.prop()混用應該是是沒有問題的

Dome

See the Pen 【JQuery操作Select標籤系列介紹】【應用篇】JQuery Select標籤連動checkbox元件 by jen (@jen_huang) on CodePen.