单选按钮和多选按钮

一个简单的应用:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>单选按钮和多选按钮模拟</TITLE>

<style type="text/css">
 a{
  width:1200px;
  height:25px;
  border:solid 1px #666;
 }
 .normallight{
  border:solid 2px #666;
 }
 .highlight{
  border:solid 2px #f60;
 }
</style>
<script type="text/javascript">
 function choose(obj){
   var btnsingles=document.getElementsByName("btnsingle");
   for(i = 0 ; i < btnsingles.length; i++){
    colors[i].className=normallight;
   }
   obj.className="highlight";
//   alert($(obj).text());
 }

 function choose1(obj){
   var name = "id"+$(obj).attr("name");
   var choose = $("input[name='"+name+"']").val();
   alert(choose);
   if(choose == 1) {
     obj.className="highlight";
     $("input[name='"+name+"']").val(2);
   }
   else {
     obj.className="normallight";
     $("input[name='"+name+"']").val(1);
   }

}
</script>
</HEAD>

<BODY>
<table width="300">
<tr>
<td><a name="btnsingle" onclick="choose(this)">link1</a></td>
<td><a name="btnsingle" onclick="choose(this)">link2</a></td>
<td><a name="btnsingle" onclick="choose(this)">link3</a></td>


<td><a name="multi1" onclick="choose1(this)">multi link 1
  <input name="idmulti1" type="hidden" value="1"/>
</a></td>
<td><a name="multi2" onclick="choose1(this)">multi link 2
  <input name="idmulti2" type="hidden" value="1"/>
</a></td>
<td><a name="multi3" onclick="choose1(this)">multi link 3
  <input name="idmulti13" type="hidden" value="1"/>
</a></td>
</tr>
</table>
</BODY>
</HTML>

posted @ 2013-03-29 22:49  Jevo  阅读(514)  评论(0编辑  收藏  举报