在js中怎么设置radio的值

JavaScript027

在js中怎么设置radio的值,第1张

取值:var addressVal = $("input[name='address']:checked").val()

指定单选值:$("input[name='radioName'][value=2]").attr("checked",true)

首先要明确下面几点:

1、动态添加的radio必须有name属性,同一组的radio其name属性一定相同(所谓同一组就是说多个radio中只有一个被选中,其他自动恢复为未选中状态);

2、如果要关联label,则radio必须设置id属性,且id必须具有唯一性(不但radio之间的id不能相同,整个页面所有元素的id都不能相同);

3、label的for属性必须与所关联的radio相同。

下面是个已通过测试的例子:

<button id=btn>添加radio</button>

<div id=test></div>

<script>

var id=100

window.onload=function(){

   document.getElementById("btn").onclick=function(){

      var ipt=document.createElement("input")

      ipt.name="r"

      ipt.type="radio"

      ipt.id="r"+id

      document.getElementById("test").appendChild(ipt)

      var lbl=document.createElement("label")

      lbl.setAttribute("for","r"+id)

      lbl.innerHTML="r"+id

      document.getElementById("test").appendChild(lbl)

      id++

   }

}

</script>

如果把radio放到label内,也可以不设置radio的id属性和label的for属性:

<button id=btn>添加radio</button>

<div id=test></div>

<script>

window.onload=function(){

   document.getElementById("btn").onclick=function(){

      var lbl=document.createElement("label")

      lbl.innerHTML="r"+parseInt(Math.random()*1000)

      var ipt=document.createElement("input")

      ipt.name="r"

      ipt.type="radio"

      lbl.appendChild(ipt)

      document.getElementById("test").appendChild(lbl)

   }

}

</script>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<title>JS怎样操作改变radio的状态</title>

<script>

var radio = function(name){

this.name = '' //单选框名字

this.members = [] //单选框的成员

this.init = function(name){ //初始化

var newMembers = [] //新的成员

this.name = name

this.members = document.body.getElementsByTagName('input')

for(var i = 0 i < this.members.length i++){

if( this.members[i].name == this.name ){

newMembers.push( this.members[i] )

}

}

this.members = newMembers //覆盖

}

this.select = function(index){ //看这个函数就行,其他的请无视

for(var i = 0 i < this.members.length i++){

if( i == index ){

this.members[i].checked = true

}else{

this.members[i].checked = false

}

}

}

this.init(name)

}

window.onload = function(){

window.sex = new radio('sex')

}

</script>

</head>

<body>

<div class="main">

<span>请选择你的性别:</span>

<input type="radio" name="sex" value="男" ><span>男</span>

<input type="radio" name="sex" value="女" ><span>女</span>

<hr />

<button onclick="sex.select(0)">选择男</button>

<button onclick="sex.select(1)">选择女</button>

<button onclick="sex.select(-1)">都不选</button>

</div>

</body>

</html>

只要控制radio元素checked属性即可

这里写了个案例(写完才发现,忘了检查类型了,不过不影响这题的回答)

附图: