demoshop

demo最近在製作一個活動頁面的時候為了要實現比較漂亮的Radio按鈕所以將Radio按鈕本身隱藏後接著丟一個Lable設定for屬性來對應到前方的Radio按鈕在火狐狸測試的時候用得很開心，正式上線之前用IE跑一下，哎唷委呀....沒搞頭啦。一度還以為是我太嫩，就去拜了一下神後，拜完後神告訴我這是IE的BUG，我都用IE8 RC1了你還這樣搞我.....

先來看看我寫的有多自然

<%=Html.RadioButton("A", 5, new { id="radio1"})%><label for="radio1">這是MVC</label>

<input id="radio2" name="A" value="5" type="radio"><label for="radio2">這是HTML</lab

這是符合W3C規範的寫法，為什麼IE不想支援它，相當的不了解，尤其是IE8不是說加強支援W3C的規範嗎?

而demo上網拜到的是這篇文章【連結】裡面有提到此問題的說明和解法。文中的解法是要在每個Label加上onClick的事件來很明確的告訴可愛的IE我按下去了!!

<%=Html.RadioButton("A", 5, new { id="radio1"})%>
<label for="radio1" onclick="document.getElementById('radio1').checked=true;">這是MVC
</label>
 
<input id="radio1" name="A" value="5" type="radio">
<label for="radio1" onclick="document.getElementById('radio2').checked=true;">這是HTML
</label>

問題看似落幕了，可是編劇都不喜歡太美滿的結局，想想看此例是一個，ok加上去就好了，如果你設計的表單有100個按鈕呢?不要說100個，10個我都嫌煩了!我們要有更Smart的做法，剛好此活動頁面有用到jQuery，那就是它啦，這樣寫就全部加上了多優雅阿。

var radioID = "#" + $("label").attr("for");
 
$(radioID).get(0).checked = true;

http://blog.roodo.com/jaceju/archives/3091221.html