[label][翻译][JavaScript]如何使用JavaScript操纵radio和check boxes

Radio 和 check boxes是form表单中的一部分，允许用户通过鼠标简单点击就可以选择。当与<textarea>元素的一般JavaScript操纵相比较，这些表单控件(form controls)的JavaScript操纵可以说是大不相同。

一个radio(单选框)与一个复选框(checkbox)的区别

在我们正式开始之前，非常重要的一点就是确定每一个人都清楚知道radio和check box的区别，在一组(a group)radio中你只能选择一个radio，然而，对于check boxes来说，多个选中是被允许。例如：在性别选择中，用radio就是最恰当的，而不是使用check box。

怎么通过JavaScript来访问一个radio/check box呢？

究竟，JavaScript是怎么样做才能访一个radio 和 checkbox呢？其实，你可以通过他们的名字来使用任何别的表单(form)元素。

无论是一个radio，还是一个checkbox，对于JavaScript来说都是没有分别的，下面代码定义了一个名为"test"的单选框，并且使用JavaScript来访问它。

<form name="example">
 <input type="radio" name="test" />

</form>
<script type="text/javascript">
// access the button called "test"
document.example.test;
</script>

如何使用JavaScript改变一个radio/checkbox 的选择状态?

如果我们无法改变选择框的状态，那么通过它自身来访问一个选择框(radio or checkbox)是没有什么用处的。

一个选择框的状态有两种——"on"被选中时，与"off"，没有被选中时，这个状态被JavaScript中的一个名为"checked"的布尔属性所表示。

使用该属性，我们不仅可以确定一个选择框的是否选中状态，还可以同赋值"true"或"false"来改变它的选中状态。（注意：这里的选中状态只是包括选中和没有选中）

//alerts whether a box is checked
alert(document.example.test.checked);

//Dynamically selects a box
document.example.test.checked = true;

http://www.javascriptkit.com/javatutors/radiocheck.shtml

多个选择框的组合

我们很少会看到只有一个radio 或 checkbox在表单form中，它们本来就是被用来组合使用的。

如今，我们知道访问一个选择框的默认方式就是通过它的名字(name属性值)。话虽如此(having said that)，想象一下有一个50个radio button的组合。

访问他们就需要我们为了每一个(each and every)按钮定义一个唯一的名字。此外，在一个我们需要使用循环来遍历所有的radio buttons的情况下，这意味着需要手写50行的代码来访问和获取50个按钮中的每一个。这个是一个难以接受的想法。

因此，你自言自语的说，就像你常常注视这天空时说"天空之外肯定有一些更好的事物"。好的，我讨厌打破你的这个想法，但是在实际生活中那确实是不存在的，事实就是如此。

 可是，在JavaScript中确实有一种技巧可以允许我们方便快捷访问一组当中的某一个radio/check box，关键就是给每一个选择框同一个名字。通过这样子的做法，JavaScript会使用同一个名字来创建一个这些选择框的数组，并且可以允许我们想访问数组元素一样访问单个的选择框。

下面让我们使用一个包含10个check boxes的表单form来证明上面这个概念。

<form name="example">
<input type="checkbox" name="myboxes" /><br />
<input type="checkbox" name="myboxes" /><br />
<input type="checkbox" name="myboxes" /><br />
<input type="checkbox" name="myboxes" /><br />
<input type="checkbox" name="myboxes" /><br />
<input type="checkbox" name="myboxes" /><br />
<input type="checkbox" name="myboxes" /><br />
<input type="checkbox" name="myboxes" /><br />
<input type="checkbox" name="myboxes" /><br />
<input type="checkbox" name="myboxes" /><br />
</form>

在上面这个表单，我们对每一个选择框都给了同一个名字，那么现在就来看看究竟是怎么样就可以轻易的访问每个选择框：

<script type="text/javascript">
//access the 3rd checkbox
document.example.myboxes[2];
//access the last checkbox
document.example.myboxed[9];

//access each and every one of the boxes
for(var i=0; i<document.example.myboxes.length ; i++){
    document.example.myboxes[i] = //do whatever
}
</script>

是的，就如我们所看到的，通过将每一个checkbox命名为同一个名字后，它们就会成为一个包含所有同名checkbox的数组。

 

如何从多个checkbox的组合中获取被选中的选择框呢？

总的来说，共有两个方法可以被用来判断组合当中的哪个选择框被选中了。请看下面的例子：

<form name="tv">
NBC:<input type="radio" name="station" /><br />
CBS:<input type="radio" name="station" /><br />
ABC:<input type="radio" name="station" /><br/>
CNN：<input type="radio" name="station" /><br/>
ESPN:<input type="radio" name="station" /><br/>
</form>

或许你想要选择NBC，并且你想要在当NBC被选中同时执行某一些操作，其他的则不执行操作。无论你想要脚本去做什么，最根本你必须先要脚本能够判断哪个选择框被选中。下面的就是两个方法帮助我们实现：

1）使用for循环来遍历整个选择框数组，并获取到被选中的那个选择框

调用for循环来遍历整个数据，并且最终获取出被选中的。

// a variable that will hold the index number of the selected radio button
var theOne;
for(var i=0;i<document.tv.station; i++){
if(document.tv.station[i].checked === true){
theOne = i;
break;//exist for loop, as target acquired
}
}

 

2)在<input>标签内使用onClikc来获取被选中的选择框

<script type="text/javascript">
var theOne;
<form name="tv">
NBC:<input type="radio" name="station" onClick="theOne=0" /><br />
CBS:<input type="radio" name="station" onClick="theOne=1" /><br/>
ABC:<input type="radio" name="station" onClick="theOne=2" /></br/>
CNN:<input type="radio" name="station" onClikc="theOne=3"/><br/>
ESPN:<input type="radio" name="station" onClick="theOne=4" /><br/>
</form>

</script>

<script type="text/javascript">
var theOne;
<form name="tv">
NBC:<input type="radio" name="station" onClick="theOne=0" /><br />
CBS:<input type="radio" name="station" onClick="theOne=1" /><br/>
ABC:<input type="radio" name="station" onClick="theOne=2" /></br/>
CNN:<input type="radio" name="station" onClikc="theOne=3"/><br/>
ESPN:<input type="radio" name="station" onClick="theOne=4" /><br/>
</form>

</script>

无论用户何时点击其中的一个选择框，变量"theOne"将会被设置为该选择框的索引值。

以上例子中，我们展示了在只能选择一个选择框情况下是如何判断哪个选择框被选中了。

在多选的情况下，使用for循环去检索整个数组和保存被选中的选择框索引，比使用onClick事件更加好。

 

原文来源：http://www.javascriptkit.com/javatutors/radiocheck3.shtml