HTML中用checkbox控件

czwanglei

<fieldset>
<legend>爱好：
<input type="checkbox" name="爱好">运动
<input type="checkbox" name="爱好">聊天
<input type="checkbox" name="爱好">玩游戏
</legend>
</fieldset>

复制代码

怎么限制用户在几个checkbox控件中只能选一个？不用radio单选控件。。

zou5268237 · zou5268237

单选应该用 radio ，如果非要用checkbox来实现单选还得用javascript来实现。

百川 · 百川

本帖最后由百川于 2014-3-20 22:57 编辑

可以用javascript写。我简单写一下，因为最近在看基础加强的视频所以javascript我也不太熟悉。
<head>

<script type="text/javascript">

function ischecked(id) {

      hobby = document.forms[0].hobby

      for (i = 0; i < hobby.length; i++) {

      hobby[i].checked=false//清空所有checkbox

}

      document.getElementById(id).checked=true//选中指定checkbox

}

</script>

<title></title>

</head>

<body>

<form action="Handler1.ashx">

<input type="checkbox" name="hobby" id="cb1" onclick="ischecked('cb1')" />//触发事件

<input type="checkbox" name="hobby" id="cb2" onclick="ischecked('cb2')"/>

<input type="checkbox" name="hobby" id="cb3" onclick="ischecked('cb3')"/>

</form>

</body>
复制代码

cancle · cancle

鬼鬼发表于 2014-3-20 01:29
何苦呢？CheckBox本来就是为多选环境设计的控件，按楼主的要求应该用RadioButtonList呀。

如果非要实现的 ...

恩，谢谢~

鬼鬼 · 鬼鬼

何苦呢？CheckBox本来就是为多选环境设计的控件，按楼主的要求应该用RadioButtonList呀。

如果非要实现的话也不是不可以：
前台代码：

<fieldset>
<legend>爱好：
<asp:CheckBox ID="sport" runat="server" Text="运动" AutoPostBack="True" OnCheckedChanged="sport_CheckedChanged" />
<asp:CheckBox ID="chat" runat="server" Text="聊天" AutoPostBack="True" OnCheckedChanged="chat_CheckedChanged" />
<asp:CheckBox ID="playGame" runat="server" Text="玩游戏" AutoPostBack="True" OnCheckedChanged="playGame_CheckedChanged" />
</legend>
</fieldset>

复制代码

后台代码：

protected void sport_CheckedChanged(object sender, EventArgs e)
{
if (sport.Checked)
{
chat.Checked = false;
playGame.Checked = false;
}
}
protected void chat_CheckedChanged(object sender, EventArgs e)
{
if (chat.Checked)
{
sport.Checked = false;
playGame.Checked = false;
}
}
protected void playGame_CheckedChanged(object sender, EventArgs e)
{
if (playGame.Checked)
{
sport.Checked = false;
chat.Checked = false;
}
}

复制代码

可以看到，页面不得不频繁地与服务器进行交互，而且失手写错或者漏写后台代码的几率也很大，所以非常不推荐这样写代码，还是使用合适的控件为好！

帐号		自动登录	找回密码
密码			加入黑马

HTML中用checkbox控件

评分

4 个回复

评分

评分