黑马程序员技术交流社区

标题: HTML中用checkbox控件 [打印本页]
作者: cancle    时间: 2014-3-20 00:20
标题: HTML中用checkbox控件
  1. <fieldset>
  2.                                 <legend>爱好：
  3.                                 <input type="checkbox" name="爱好">运动
  4.                                 <input type="checkbox" name="爱好">聊天
  5.                                 <input type="checkbox" name="爱好">玩游戏
  6.                                 </legend>
  7.                         </fieldset>
复制代码

怎么限制用户在几个checkbox控件中只能选一个？不用radio单选控件。。
作者: 鬼鬼    时间: 2014-3-20 01:29
何苦呢？CheckBox本来就是为多选环境设计的控件，按楼主的要求应该用RadioButtonList呀。

如果非要实现的话也不是不可以：
前台代码：
  1.             <fieldset>
  2.                 <legend>爱好：
  3.                     <asp:CheckBox ID="sport" runat="server" Text="运动" AutoPostBack="True" OnCheckedChanged="sport_CheckedChanged" />
  4.                     <asp:CheckBox ID="chat" runat="server" Text="聊天" AutoPostBack="True" OnCheckedChanged="chat_CheckedChanged" />
  5.                     <asp:CheckBox ID="playGame" runat="server" Text="玩游戏" AutoPostBack="True" OnCheckedChanged="playGame_CheckedChanged" />
  6.                 </legend>
  7.             </fieldset>
复制代码

后台代码：
  1.         protected void sport_CheckedChanged(object sender, EventArgs e)
  2.         {
  3.             if (sport.Checked)
  4.             {
  5.                 chat.Checked = false;
  6.                 playGame.Checked = false;
  7.             }
  8.         }

  10.         protected void chat_CheckedChanged(object sender, EventArgs e)
  11.         {
  12.             if (chat.Checked)
  13.             {
  14.                 sport.Checked = false;
  15.                 playGame.Checked = false;
  16.             }
  17.         }

  19.         protected void playGame_CheckedChanged(object sender, EventArgs e)
  20.         {
  21.             if (playGame.Checked)
  22.             {
  23.                 sport.Checked = false;
  24.                 chat.Checked = false;
  25.             }
  26.         }
复制代码

可以看到，页面不得不频繁地与服务器进行交互，而且失手写错或者漏写后台代码的几率也很大，所以非常不推荐这样写代码，还是使用合适的控件为好！
作者: cancle    时间: 2014-3-20 20:31
鬼鬼 发表于 2014-3-20 01:29
何苦呢？CheckBox本来就是为多选环境设计的控件，按楼主的要求应该用RadioButtonList呀。

如果非要实现的 ...

恩，谢谢~
作者: 百川    时间: 2014-3-20 21:46
本帖最后由 百川 于 2014-3-20 22:57 编辑

可以用javascript写。我简单写一下，因为最近在看基础加强的视频所以javascript我也不太熟悉。
  1. <head>
  2. <script type="text/javascript">
  3.     function ischecked(id) {
  4.         hobby = document.forms[0].hobby
  5.         for (i = 0; i < hobby.length; i++) {
  6.         hobby[i].checked=false//清空所有checkbox
  7.     }
  8.         document.getElementById(id).checked=true//选中指定checkbox
  9.     }
  10. </script>
  11.     <title></title>
  12. </head>
  13. <body>
  14. <form action="Handler1.ashx">
  15. <input type="checkbox" name="hobby" id="cb1" onclick="ischecked('cb1')" />//触发事件
  16. <input type="checkbox" name="hobby" id="cb2" onclick="ischecked('cb2')"/>
  17. <input type="checkbox" name="hobby" id="cb3" onclick="ischecked('cb3')"/>
  18. </form>
  19. </body>
复制代码


作者: zou5268237    时间: 2014-3-21 15:58
单选应该用 radio ，如果非要用checkbox来实现单选 还得用javascript来实现。



欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2