关于jquery清空div块中表单的值和操作元素是否可用

最新推荐文章于 2021-06-20 12:26:14 发布

原创最新推荐文章于 2021-06-20 12:26:14 发布 · 988 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #select #div

jquery 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，通过使用JavaScript实现页面上的交互功能。包括根据用户选择显示不同的选项、禁用某些输入项以及重置按钮的功能。文章通过具体代码展示了如何通过jQuery操作DOM元素。

<html>

<head>
<title>我的第一个 HTML 页面</title>
<script src="jquery.js"></script>
<script>
function resetRadio(){
	alert($("select option:checked")[0].label);
   $("input[type=radio][name=cs]:checked")[0].checked=false;

}

function isyan(value){
	if(value==0){
		$("input[type=radio][name=zs]")[0].disabled=false;
		$("input[type=radio][name=zs]")[1].disabled=false;

		$("#able input").removeAttr('disabled');  //可用
	}else{
		if($("input[type=radio][name=zs]:checked").length!=0){
			$("input[type=radio][name=zs]:checked")[0].checked=false;
		}
		$("input[type=radio][name=zs]")[0].disabled=true;
		$("input[type=radio][name=zs]")[1].disabled=true;

		$("#able input").attr('disabled', 'disabled');//不可用
		$("#able input").val("");//清空input值
		//清空radio值
		if($("#able input[type=radio]:checked").length!=0){
			$("#able input[type=radio]:checked")[0].checked=false;
		}
	}
}

function chSelect(o){debugger;
	alert(o.value+","+$("select option[value="+o.value+"]")[0].label);
}
</script>
</head>

<body>
<input type="radio" name="cs" value="0" onclick="isyan(0)"/>是烟
<input type="radio" name="cs" value="1" onclick="isyan(1)"/>否烟
<br>
<input type="radio" name="zs" value="0"/>真烟
<input type="radio" name="zs" value="1"/>假烟

<input type="button" onclick="resetRadio()" value="重置">

<select onchange="chSelect(this)">
	<option value="0">小明</option>
	<option value="1">小马</option>
</select>

<div id="able">
<input type="radio" name="cc" value="0"/>选
<input type="radio" name="cc" value="1"/>不选
<input type="text" name="xxc">
</div>
</body>

</html>