提姆寫程式

0%

jQuery 筆記 - 讓 checkbox 預設值為選取方法

發表於 更新於 分類於 Disqus：
prop 設定預設值好簡單

image alt

這次專案上使用到 checkbox 的方法，若要預設讓 checkbox 為勾選可以這樣寫。

1
2
3
4
5
6
7
8
9
10
11
<label
  >checkbox
  <input type="checkbox" checked="checked" />
</label>

<style>
  input:checked {
    width: 50px;
    height: 50px;
  }
</style>

CSS 這樣設定可以在選取時讓 checkbox 變大 (好，我知道滿無聊的。)

這沒什麼問題，但因為客戶想要預設畫面已經讓 checkbox 勾選，並讓 checkbox 勾選時變色，但 checkbox 無法透過 CSS 改變這個設定，所以就要用到偽元素來做。

偽元素無法取消 checked

1
2
3
4
5
6
7
<div class="checkbox-group">
  <input id="checkbox3" type="checkbox" checked />
  <label for="checkbox3">
    <span class="icon-checkbox"></span>
    <span>Checked</span>
  </label>
</div>

如下方所見，如果這樣寫，偽元素變成沒辦法取消選取…

然後如果不解決就慘了。

prop()

這時候就可以使用外部賦予值，在 input 刪掉原本的 checked 屬性，再新增一個 class="jq-checked"，並加上這段 jQuery 程式碼，解決!!

1
$(".jq-checked").prop("checked", true);

客戶的要求總是發現新玩意!

參考資料