jQuery重置单选框和input框

取消选中单选框radio，第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的，大家可以看看下面的示例

本文提供了三种取消选中radio的方式，代码示例如下:

本文依赖于jQuery,其中第一种，第二种方式是使用jQuery实现的，第三种方式是基于JS和DOM实现的。

<!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){

// 切换到一个隐藏域,两种方式均可

//$("#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

取消

$('.reset-bottom').click(function(){
$('.mui-input-clear').attr('value','');
$('input[name=sex]').removeAttr("checked");
$('input[name=type]').removeAttr("checked");
$('input[name=steelyard]').removeAttr("checked");
$('input[name=brand]').removeAttr("checked");

});

巴特西

jQuery重置单选框和input框

最新文章

热门文章