三種取消選中單選框radio的方法
本文提供了三種取消選中radio的方式,代碼示例如下:
本文依賴于jQuery,其中第一種,第二種方式是使用jQuery實(shí)現(xiàn)的,第三種方式是基于JS和DOM實(shí)現(xiàn)的。
<!DOCTYPE HTML> <html> <head> <title>單選按鈕取消選中的三種方式</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"> </script> <script type="text/javascript"> $(function(){ // var $browsers = $("input[name=browser]"); var $cancel = $("#cancel"); var $byhide = $("#byhide"); var $remove = $("#remove"); // $cancel.click(function(e){ // 移除屬性,兩種方式都可 //$browsers.removeAttr("checked"); $browsers.attr("checked",false); }); // $byhide.click(function(e){ // 切換到一個(gè)隱藏域,兩種方式均可 //$("#hidebrowser").attr("checked",true); $("#hidebrowser").attr("checked","checked"); }); // $remove.click(function(e){ // 直接去的DOM元素,移除屬性 // 如果不使用jQuery,則可以移植此方式 var checkedbrowser=document.getElementsByName("browser"); /* $.each(checkedbrowser, function(i,v){ v.checked = false; v.removeAttribute("checked"); }); */ // var len = checkedbrowser.length; var i = 0; for(; i < len; i++){ // 必須先賦值為false,再移除屬性 checkedbrowser[i].checked = false; // 不移除屬性也可以 //checkedbrowser[i].removeAttribute("checked"); } }); }); </script> </head> <body> <p>您喜歡哪款瀏覽器?</p> <form> <input style="display:none;" id="hidebrowser" type="radio" name="browser" value=""> <input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br /> <input type="radio" name="browser" value="Firefox">Firefox<br /> <input type="radio" name="browser" value="Netscape">Netscape<br /> <input type="radio" name="browser" value="Opera">Opera<br /> <br /> <input type="button" id="cancel" value="取消選中方式1" size="20"> <input type="button" id="byhide" value="取消選中方式2" size="20"> <input type="button" id="remove" value="取消選中方式3" size="20"> </form> </body> </html>
相關(guān)文章
40個(gè)新鮮出爐的jQuery 插件和免費(fèi)教程[上]
作為最流行的 JavaScript 庫,jQuery 擁有豐富的插件,能夠幫助開發(fā)者簡單快速的實(shí)現(xiàn)各種功能2012-07-07讓頁面上兩個(gè)div中的滾動條(滑塊)同步運(yùn)動示例
如何想讓頁面上兩個(gè)div中的滾動條(滑塊)同步運(yùn)動該怎實(shí)現(xiàn),具體代碼如下,感興趣的朋友可以參考下2013-08-08jQuery實(shí)現(xiàn)html雙向綁定功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)html雙向綁定功能,涉及jQuery針對HTML頁面元素事件綁定相關(guān)操作技巧,需要的朋友可以參考下2017-10-10jQuery實(shí)現(xiàn)漸變彈出層和彈出菜單的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)漸變彈出層和彈出菜單的方法,涉及jQuery漸變效果及css顯示的實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02jQuery實(shí)現(xiàn)的點(diǎn)擊按鈕改變樣式功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的點(diǎn)擊按鈕改變樣式功能,涉及jQuery基于事件響應(yīng)的頁面元素樣式動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07Jquery Easyui搜索框組件SearchBox使用詳解(19)
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui搜索框組件SearchBox的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12jquery實(shí)現(xiàn)平滑的二級下拉菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)平滑的二級下拉菜單效果,可實(shí)現(xiàn)鼠標(biāo)滑過彈出二級下拉菜單,涉及jquery鼠標(biāo)hover事件及fadeIn與fadeOut事件操作頁面元素隱藏及顯示的實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-08-08關(guān)于HTML5的data-*自定義屬性的總結(jié)
大家總是習(xí)慣使用HTML標(biāo)簽添加自定義屬性來存儲和操作數(shù)據(jù),所以才在HTML5規(guī)范里增加了一個(gè)自定義data屬性,這樣使用更便捷,一起跟隨小編過來看看吧2018-05-05