软件学堂

网游分类软件分类

JS代码实现两组复选框互斥问题

2012-11-01 来源:网络

【实例名称】

JS代码实现两组复选框互斥问题

【实例描述】

有时候可以将复选框分为两组,选择了A组就不能选择B组。如在一些运动项目中,运动员选择了200米,可能就不能选择200米接力。本例通过两组复选框,学习如何实现两组选项之间的互斥。

【实例代码】

<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-学无忧(www.xue51.com)</title> <script language="javascript"> function sel1(obj){    if(obj.checked){                     //如果当前项被选中了       document.all.chk2.checked=false   //则不能选择第二组    document.all.sel1.selectedIndex=4 //指定下拉框中选择的项    } } function sel2(obj){    if(obj.checked){                     //如果当前项被选中了    document.all.chk1.checked=false  //则不能选择第一组    document.all.sel1.selectedIndex=0 //指定下拉框中选择的项    } }       </script> </head> <body> <p>A组   <input type="checkbox" name="checkbox" value="checkbox" id="chk1" onClick="sel1(this)"> </p> <p>B组   <input type="checkbox" name="checkbox2" value="checkbox" id="chk2" onClick="sel2(this)"> </p> <p>C   <select name="select" id="sel1">   <option selected="selected">个人</option>   <option>200米</option>   <option>400米</option>   <option>800米</option>   <option>200米接力</option>   </select> </p> </body> </html>

【运行效果】

JS代码实现两组复选框互斥问题运行效果

【难点剖析】

本例的重点是如何实现两组复选框的互斥。“checked”属性用来设置复选框是否选中,其值如果为“true”则表示选中,为“false”表示未选中。当改变“A组’’复选框选中状态的时候,需要先判断其是否被选中,如果被选中则设置“B组”复选框的“checked”属性为“false”,否则设置为“true”。

【源码下载】

如果你不愿复制代码及提高代码准确性,你可以点击:两组复选框互斥问题 进行本实例源码下载 

上一篇:PS调色技巧:调出漂亮MM清爽通透蓝色
下一篇:JS代码实现使用复选框控制文本框

相关文章