三種取消選中單選框radio的方法
本文依賴於jQuery,其中第一種,第二種方式是使用jQuery實現的,第三種方式是基於JS和DOM實現的。
| 04 |
<title>選項按鈕取消選中的三種方式</title> |
| 05 |
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"> |
| 07 |
<script type="text/javascript"> |
| 10 |
var $browsers = $("input[name=browser]"); |
| 11 |
var $cancel = $("#cancel"); |
| 12 |
var $byhide = $("#byhide"); |
| 13 |
var $remove = $("#remove"); |
| 15 |
$cancel.click(function(e){ |
| 17 |
//$browsers.removeAttr("checked"); |
| 18 |
$browsers.attr("checked",false); |
| 21 |
$byhide.click(function(e){ |
| 23 |
//$("#hidebrowser").attr("checked",true); |
| 24 |
$("#hidebrowser").attr("checked","checked"); |
| 27 |
$remove.click(function(e){ |
| 29 |
// 如果不使用jQuery,則可以移植此方式 |
| 30 |
var checkedbrowser=document.getElementsByName("browser"); |
| 32 |
$.each(checkedbrowser, function(i,v){ |
| 34 |
v.removeAttribute("checked"); |
| 38 |
var len = checkedbrowser.length; |
| 42 |
checkedbrowser[i].checked = false; |
| 44 |
//checkedbrowser[i].removeAttribute("checked"); |
| 55 |
<input style="display:none;" id="hidebrowser" type="radio" name="browser" value=""> |
| 56 |
<input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br /> |
| 57 |
<input type="radio" name="browser" value="Firefox">Firefox<br /> |
| 58 |
<input type="radio" name="browser" value="Netscape">Netscape<br /> |
| 59 |
<input type="radio" name="browser" value="Opera">Opera<br /> |
| 61 |
<input type="button" id="cancel" value="取消選中方式1" size="20"> |
| 62 |
<input type="button" id="byhide" value="取消選中方式2" size="20"> |
| 63 |
<input type="button" id="remove" value="取消選中方式3" size="20"> |