項目中,有時候填寫表單我們的選項會隱藏掉radio或者checkbox,而只顯示給用戶對應的文字選擇,如果用戶點擊label選擇時,在FF/Chrome等標準瀏覽器中隱藏掉的radio/checkbox也同樣隨着改變選中狀態,而在IE下則不會發生變化。
注意,需要指定表單元素的id屬性然後使用label的for屬性綁定控件。
<input type="radio" name="gender" id="gender1" value="男" checked="checked" />
<label for="gender1">男</label>
<input type="radio" name="gender" id="gender2" value="女" />
<label for="gender2">女</label>
通過CSS設置display:none 或者 visibility: hidden隱藏掉radio按鈕,則當點擊label切換選擇狀態時,對應的按鈕實際上是未被改變狀態。解決方法有幾種:
1.通過javascript腳本來再次操作DOM保證選擇狀態
$("label").click(function(e){
e.preventDefault();
$("#"+$(this).attr("for")).click().change();
});
2.不使用display:none,通過position屬性定位到可視區域外,避開問題。
position: absolute;
top: -999px;
left: -999px;
3.通過z-index/width或透明度opacity將元素隱藏掉。
input{
position: absolute;
z-index: -1;
}
或者是
input{
width: 0;
}
或者是
input{
-webkit-opacity:0;
-moz-opacity:0;
opacity:0;
filter:alpha(opacity:0);
}
需要提醒的是,label的for屬性是內聯元素,其對應的js屬性爲htmlFor,例如可以這樣訪問或設置for屬性值。document.getElementById("xxx").htmlFor="inputid";;
目前IE6-IE9都有這樣的問題,不知道IE以後會不會和標準瀏覽器的行爲看齊。希望吧!!