html中radio的用法：
radio分组 ：只要name一样，就是一组的，即一组中只能选择一个，如下：
<span>group1:</span>
<input type="radio" id="radio1" checked="checked" name="group1" />radio1
<input type="radio" id="radio2" name="group1" />radio2
<input type="radio" id="radio3" name="group1" />radio3
<span>group2:</span>
<input type="radio" id="radio4" checked="checked" name="group2" />radio4
<input type="radio" id="radio5" name="group2" />radio5
<input type="radio" id="radio6" name="group2" />radio6
获取选中的radio节点：使用jquery可以很方便做到，先选择group，然后过滤出checked的，如下
var group1 = $("[name='group1']").filter(":checked")
console.log(group1.attr("id"))
选中一个radio节点：使用jquery设置checked属性，如下
$("#radio2").attr("checked", "checked")
去选中一个radio节点 移除checked属性，如下
$("#radio1").removeAttr("checked")
这样做的结果可能造成一组radio中没有一个处于选中状态
注册选中去选中事件：还是使用jquery的on函数来注册change事件，如下：
$("[name='group1']").on("change",
function (e) {
console.log($(e.target).val())
}
)
这样只要group1中任何一个有选中的，就会触发函数
1、首先，我们点击CheckBox控件。
2、这时我们便可以在窗体中直接绘制。
3、然后我们便可以在这里更改CheckBox的文字显示。
4、如果想要默认选中，我们将Checked设置为TRUE。
5、也可将Enabled设置为TRUE。
6、还可以在这里设置更多属性。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>New Web Project</title>
<script src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
window.onload= function(){
var inpt= document.getElementById('myForm').getElementsByTagName('input') //获取表单下所有的input元素
for(var i=0i<inpt.lengthi++){ //遍历获得的input元素
if(inpt[i].type=='radio'){ //如果是单选按钮
if(inpt[i].defaultChecked) //页面载入时选中的值
document.getElementById('text1').value=inpt[i].nextSibling.nodeValue//显示页面载入时选中的值
inpt[i].onclick=function(){ // input的单击事件
if(this.checked)
document.getElementById('text2').value=this.nextSibling.nodeValue//显示被选中的值
}
}
}
}
// 下面是用jquery实现
$(document).ready(function(){
$('input:radio').each(function(){
if(this.checked)
$('#text1').val($(this).val())
$(this).click(function(){
if(this.checked)
$('#text2').val($(this).val())
})
})
})
</script>
</head>
<body>
<form id="myForm">
<input type="radio" name="rad" checked="checked" value="音乐"/>音乐<br />
<input type="radio" name="rad" value="美术"/>美术<br />
<input type="radio" name="rad" value="电影"/>电影<br />
默认值：<input type="text" id="text1" /><br />
选中值：<input type="text" id="text2" />
</form>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）