jQuery 實現單選按鈕（radio）勾選和取消，使用prop()代替attr() 踩坑部落格
歡迎來到Altaba的部落格 2017年11月1日
很多時候，我們需要原因js指令碼去操控一排單選按鈕，獲取後臺資料顯示當前項的某個設定值，通過單選框顯示，進而還能夠通過修改勾選單選按鈕去修改這個項的值，由於整個專案前端是通過jQuery實現，果斷想到使用attr（）方法去實現修改單選按鈕checked屬性，誰知道遇到一系列無法想象的奇怪問題
比如：手動修改單選按鈕，後無法通過jQuery的attr（）清除，想辦法清除完了後面又無法通過指令碼重新勾選單選按鈕，就這樣測試花了我一下午時間，baidu google一下午都是說用attr（）去實現，故沒懷疑這個方法。
後面通過查閱資料發現：jquery中同時提供了attr()與prop()方法對屬性進行獲取，但是還是有一定的區別
原文這樣寫的：
The difference between attributes and properties can be important in specific situations. Before jQuery 1.6 , the .attr() method sometimes took property values into account when retrieving some attributes, which could
cause inconsistent behavior. As of jQuery 1.6 , the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
For example, selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, and defaultSelected should be retrieved and set with the .prop() method. Prior to jQuery 1.6 , these properties were retrievable with
the .attr() method, but this was not within the scope of attr. These do not have corresponding attributes and are only properties.
大體上的意思是：在jquery1.6之後，對於checked，selected等進行狀態改變時，需要使用的是prop()而不是attr()，判斷到底單選框是否選中了，這個也同樣是使用prop().！！！
於是修改所有attr()為prop()後完美實現，果然框架的吭能把程式設計師逼瘋
下面是demo程式碼，歡迎大家複製測試
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="radio" name="aaa" value="小米" tag="0"><br> <input type="radio" name="aaa" value="小是" tag="0"><br> <input type="radio" name="aaa" value="小誰" tag="0"><br> <input type="radio" name="aaa" value="小發" tag="0"><br> <input type="radio" name="aaa" value="小哦" tag="0"> <button class="btn1">點我除去選中項</button> <button class="btn2">點我選中第二個</button> <button class="btn3">點我選中第三個</button> <button class="btn4">點我選中第四個</button> <button class="btn5">點我選中第五個</button> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script> /*//解決選中的單選框無法取消問題 $(":radio").click( function(){ var nm=$(this).attr("name"); $(":radio[name="+nm+"]:not(:checked)").attr("tag",0); if($(this).attr("tag")==1){ $(this).attr("checked",false); $(this).attr("tag",0); } else{ $(this).attr("tag",1); } } );*/ function de() { //錯誤示範，均會出現什麼各種問題 /*$.each($('input:radio'),function(i,v){ $(v).attr('checked', false); $(v).removeAttr('checked'); //v.checked = false; //v.removeAttribute("checked"); })*/ //$("input[name=aaa]").prop("checked",false); $('input:checked').prop('checked', false); //$("input[name=aaa]").removeAttr("checked") } $('.btn1').click(function () { de() }) $('.btn2').click(function () { //de(); $('input:radio').eq(1).prop('checked', true); }) $('.btn3').click(function () { //de(); $('input:radio').eq(2).prop('checked', true); }) $('.btn4').click(function () { //de(); $('input:radio').eq(3).prop('checked', true); }) $('.btn5').click(function () { //de(); $('input:radio').eq(4).prop('checked', true); }) </script> </body> </html>