[web] 判斷checkbox是否被勾選

UI是第一眼的印象，越好的設計能留住越多的使用者。

本文將演示如何判斷html checkbox勾選與否的方式。

attr與prop

在html中要致做出一個checkbox輸入框語法如下:

[code language=”html”] <input type="checkbox" id="checkbox1"/> [/code]

使用程式控制checkbox勾選(不勾選)

除了單純創建一個input checkbox讓使用者操作之外，也可以使用javascript控制checkbox勾選與否。

[code language=”javascript”] // 勾選(兩種方式均可) $("#checkbox1").attr("checked", true); $("#checkbox1").prop("checked", true); // 不勾選(兩種方式均可) $("#checkbox1").attr("checked", false); $("checkbox1").prop("checked", false); [/code]

使用程式獲取checkbox當前狀態

這邊特別注意，不可以使用attr來取得checkbox勾選狀態，而是要使用prop。

[code language=”javascript”] var isChecked = $("#checkbox1").prop("checked"); [/code]

上面這行程式碼代表取得id為checkbox1之checkbox的勾選狀態，如被勾選，變數isChecked為true，反之則為false。