|M| 当有两个选项,且用户可选可不选且只能选一项的时候,大家是怎么做的
比如
有
选项A
选项B
这里要求是可以两个都不选如果选的话只能选一个
开始我是用Option来做的 但选了以后就没有办法不选
然后我就用CheckBox来做的
当选某一个让另一个checked=false
大家是怎么做的
谢谢
[解决办法]
listbox试试
[解决办法]
xxx.selected=false
[解决办法]
或者用radiobuttonlist，默认只能选一个，再点已选的项时，用js脚本设置他不选
[解决办法]
radiobuttonlist
[解决办法]
ASP.NET AJAX Control Toolkit 的MutuallyExclusiveCheckBox控件完全满足你的需求，只不过有点杀鸡用牛刀的感觉
[解决办法]
ASP.NET AJAX Control Toolkit 的MutuallyExclusiveCheckBox控件在线演示地址
http://ajax.asp.net/ajaxtoolkit/MutuallyExclusiveCheckBox/MutuallyExclusiveCheckBox.aspx
[解决办法]
radiobutton可以保证只选一个
[解决办法]
<script type= "text/javascript "> function CheckItems() { var tb = document.getElementById( "CheckBoxList1 "); var chks = tb.getElementsByTagName( "input "); for(var i=0;i <chks.length;i++) { if(chks[i].checked && event.srcElement!= chks[i]) { chks[i].checked =false; return; } } } </script>
[解决办法]
<asp:CheckBoxList onclick= "javascript:return CheckItems(); " ID= "CheckBoxList1 " runat= "server "> <asp:ListItem> a </asp:ListItem> <asp:ListItem> b </asp:ListItem> <asp:ListItem> c </asp:ListItem> <asp:ListItem> d </asp:ListItem> </asp:CheckBoxList>
[解决办法]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> 一个用例子类似的多选操作例子listbox </title>
<script language= "javascript ">
<!--
/*=========================================================================================
* 将时段信息发送到待选时段列表框中。
*=========================================================================================*/
function addToPotTimelist(fName, _value)
{
// 如果没有选择则返回
if (fName == " ")
return;
// 创建option对象
var option = document.createElement( "OPTION ");
option.value = _value;
option.text = fName;
// 增加新option选项
frmProg.PotTimeList.add(option);
}
/*=========================================================================================
* 将数据库里的文件的名称信息发送到Video列表框中。
*=========================================================================================*/
function addToPotTimeHaslist(fName, _value)
{
// 如果没有选择则返回
if (fName == " ")
return;
// 创建option对象
var option = document.createElement( "OPTION ");
option.value = _value;
option.text = fName;
// 增加新option选项
frmProg.PotTimeHasList.add(option);
}
/*=========================================================================================
* 将待选时段加入时段列表。
*=========================================================================================*/
function addToBroadcast()
{
// 得到文件列表框中所有项目的总数
var flLength = parseInt(frmProg.PotTimeList.length);
var vlLength = parseInt(frmProg.PotTimeHasList.length);
var option;
if (flLength == 0)
{
alert( "【系统提示】\n\n待选时段列表中没有任何的时段信息，无法执行加入操作！ ");
return;
}
for (var i = 0; i < flLength; i++)
{
if (frmProg.PotTimeList.options(i).selected)
{
var fName = frmProg.PotTimeList.options(i).text;
var fValue = frmProg.PotTimeList.options(i).value;
//alert(fName);
var isExist = false;
for (var j = 0; j < vlLength; j++)
{
if (frmProg.PotTimeHasList.options(j).value == fValue)
{
isExist = true;
}
}
//选中文件还没有加入广播列表
if (!isExist)
{
option = document.createElement( "OPTION ");
option.value = fValue;
option.text = fName;
frmProg.PotTimeHasList.add(option);
}
}
}
}
/*=========================================================================================
* 从时段列表中删除选中项。
*=========================================================================================*/
function delFromBroadcast()
{
var vlLength = parseInt(frmProg.PotTimeHasList.length);
for (var i = 0; i < vlLength; i++)
{
if (frmProg.PotTimeHasList.options(i).selected)
{
frmProg.PotTimeHasList.remove(i);
vlLength--;
}
}
}
/*=========================================================================================
* 将影片文件列表中选中项向上移动。
*=========================================================================================*/
function moveUp()
{
var i = frmProg.PotTimeHasList.selectedIndex;
if (-1 == i || 0 == i) return;
/* 得到选中的option的值，将其赋予新的对象 */
var option = document.createElement( "OPTION ");
option.value = frmProg.PotTimeHasList.options[i].value;
option.text = frmProg.PotTimeHasList.options[i].text;
/* 提升该option并选中它 */
frmProg.PotTimeHasList.remove(i);
frmProg.PotTimeHasList.add(option,i-1);
frmProg.PotTimeHasList.selectedIndex = i-1;
}
/*=========================================================================================
* 将影片文件列表中选中项向下移动。
*=========================================================================================*/
function moveDown()
{
var i = frmProg.PotTimeHasList.selectedIndex;
if (-1 == i || i == frmProg.PotTimeHasList.length -1) return;
/* 得到选中的option的值，将其赋予新的对象 */
var option = document.createElement( "OPTION ");
option.value = frmProg.PotTimeHasList.options[i].value;
option.text = frmProg.PotTimeHasList.options[i].text;
/* 提升该option并选中它 */
frmProg.PotTimeHasList.remove(i);
frmProg.PotTimeHasList.add(option,i+1);
frmProg.PotTimeHasList.selectedIndex = i+1;
}
/*=========================================================================================
* 将影片文件列表中所有项目选中。
*=========================================================================================*/
function selectAllPotTimeList()
{
var vlLength = parseInt(frmProg.PotTimeHasList.length);
for (var i = 0; i < vlLength; i++)
{
frmProg.PotTimeHasList.options(i).selected = true;
}
}
// -->
</script>
</head>
<body>
<form id= "frmProg " action= " ">
<table height= "100% " width= "100% ">
<tr>
<td align= "center "> 待选时段(双击添加) </td>
<td> </td>
<td align= "center "> 已选时段(双击删除) </td>
</tr>
<tr>
<td align= "center "> <SELECT id= "PotTimeList " ondblclick= "javascript:addToBroadcast(); " style= "WIDTH: 200px "
multiple size= "10 " name= "PotTimeList ">
<option value= "01:00 "> 一点 </option>
<option value= "02:00 "> 两点 </option>
<option value= "03:00 "> 三点 </option>
</SELECT>
</td>
<td align= "center "> <input type= "button " onclick=addToBroadcast(); value= "添加 ">
<br>
<br>
<input type= "button " onclick=delFromBroadcast(); value= "移除 ">
</td>
<td align= "center "> <SELECT multiple id= "PotTimeHasList " ondblclick= "javascript:delFromBroadcast(); " style= "WIDTH: 200px "
size= "10 " name= "PotTimeHasList "> </SELECT>
</td>
</tr>
<tr>
<td> <INPUT id= "hdnPotList " type= "hidden " runat= "server "> </td>
<td> </td>
<td align= "center ">
</td>
</tr>
</table>
</form>
</body>
</html>
