CheckBoxList1的事件

  <asp:CheckBoxList ID="CheckBoxList1" runat="server">
            <asp:ListItem ><a href="javascript:void(0);" onclick="alert('你点了我');"> 点我啊</a></asp:ListItem>
  </asp:CheckBoxList>

CheckBoxList可以设置AutoPostback为false如果页面回传后保持在原来的位置可以设置
Page.MaintainScrollPositionOnPostBack = true;

那把CheckBoxList1.AutoPostBack=false; 的话··我怎么样可以实现点了同意就不能点不同意的沟了····点了不同意就不能点同意的沟了··就是2个沟只能点一个···希望谁能提供一下代码·

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
   <script language="javascript" type="text/javascript">
    function CheckBoxList_Click(sender)
    {
        var container = sender.parentNode;
        if(container.tagName.toUpperCase() == "TD") { // 服务器控件设置呈现为 table 布局（默认设置），否则使用流布局
            container = container.parentNode.parentNode; // 层次： <table><tr><td><input />
        }
        var chkList = container.getElementsByTagName("input");
        var senderState = sender.checked;
        for(var i=0; i<chkList.length;i++) {
            chkList[i].checked = false;
        }
        sender.checked = senderState;
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
          <asp:CheckBoxList ID="CheckBoxList1" BorderWidth="1" runat="server" RepeatLayout="Flow">
        <asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item1">Item1</asp:ListItem>
        <asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item2">Item2</asp:ListItem>
        <asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item3">Item3</asp:ListItem>
        <asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item4">Item4</asp:ListItem>
        <asp:ListItem onclick="CheckBoxList_Click(this)" Value="Item5">Item5</asp:ListItem>
        </asp:CheckBoxList>
    </div>
    </form>
</body>
</html>

获取你checkboxlist生成的客户端checkbox
然后添加onpropertychange事件

Javascript:
<script language="javascript">
       function check(obj)
       {
          var table=obj.parentNode.parentNode.parentNode;
          var checks=table.getElementsByTagName("input");
          for(var i=0;i<checks.length;i++)
          {
             if(checks[i].type=="checkbox")
             {
                if(obj.checked && checks[i]!=obj )
                {
                   checks[i].checked=false;
                }
             }
          }
       }
    </script>后台CS代码if (!Page.IsPostBack)
        {
            foreach (ListItem li in chk1.Items)
            {
                li.Attributes.Add("onclick", "check(this);");
            }
            foreach (ListItem li in chk2.Items)
            {
                li.Attributes.Add("onclick", "check(this);");
            }
            foreach (ListItem li in chk3.Items)
            {
                li.Attributes.Add("onclick", "check(this);");
            }
            ...........
        }

checkbox是多选，如果要实现互斥，需要radio控件如果一定要checkbox，需要用js进行控制<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<script>
document.onclick=function(e){
  e=e||event;
  var o=e.srcElement||e.target;
  if(o.tagName=="INPUT"&&o.type=="checkbox"){
    var cbs=o.parentNode.getElementsByTagName("input");
    for(var i=0;i<cbs.length;i++){
      if(cbs[i]!=o)cbs[i].checked=false;
    }
  }
}
</script>
<div>1--问题1    <input type="checkbox" name="cb1" />同意 <input type="checkbox" name="cb1" />不同意</div>
<div>2--问题2    <input type="checkbox" name="cb2" />同意 <input type="checkbox" name="cb2" />不同意</div>
<div>3--问题3    <input type="checkbox" name="cb3" />同意 <input type="checkbox" name="cb3" />不同意</div>
</body>
</html>

谢谢你们了啊·· 我还想问个问题·· 我现在还想问个 RadioButtonList 的问题··我现在的RadioButtonList 有4个选项
<asp:ListItem>1.篮球</asp:ListItem>
<asp:ListItem>2.足球</asp:ListItem>
<asp:ListItem>3.羽毛球</asp:ListItem>
<asp:ListItem>4.其他</asp:ListItem>如果点击 4其他的话会跳出一个 <input id="Txt3answer" type="text" style="width: 480px" runat="server" >
我也是希望能用 js 来控制·· 希望哪位高手能提供一下代码··

radiobuttonlist生成的对应html代码也差不多如下，你在客户端设置runat='server'属性没有用的，客户端没这个属性，需要设置name属性，并且获取值时使用Request对象来获取<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<script>
document.onclick=function(e){
  e=e||event;
  var o=e.srcElement||e.target;
  if(o.tagName=="INPUT"&&o.type=="radio"){
    var txt=document.getElementById('Txt3answer');
    if(o.value=="4.其他")txt?"":o.parentNode.innerHTML+='<input id="Txt3answer" name="Txt3answer" type="text" style="width:480px"/>';
    else if(txt){
      var tbody=o.parentNode.parentNode.parentNode;
      tbody.rows[tbody.rows.length-1].cells[0].removeChild(txt);
    }
  }
}</script>
<table id="rbl" border="0">
<tr>
<td><input id="rbl_0" type="radio" name="rbl" value="1.篮球" /><label for="rbl_0">1.篮球 </label></td>
</tr><tr>
<td><input id="rbl_1" type="radio" name="rbl" value="2.足球" /><label for="rbl_1">2.足球 </label></td>
</tr><tr>
<td><input id="rbl_2" type="radio" name="rbl" value="3.羽毛球" /><label for="rbl_2">3.羽毛球 </label></td>
</tr><tr>
<td><input id="rbl_3" type="radio" name="rbl" value="4.其他" /><label for="rbl_3">4.其他 </label></td>
</tr>
</table>
</body>
</html>

Page.MaintainScrollPositionOnPostBack = true;

<asp:ListItem onclick="radio(tihs,1)" >1.篮球 </asp:ListItem>
<asp:ListItem onclick="radio(tihs,2)">2.足球 </asp:ListItem>
<asp:ListItem onclick="radio(tihs,3)">3.羽毛球 </asp:ListItem>
<asp:ListItem onclick="radio(tihs,4)">4.其他 </asp:ListItem> function radio(obj,num)
{
var Txt3answer=document.getElementById('Txt3answer');
if(this.checked)
{
   if(num==4)
   {
   Txt3answer.display='block';
   }
   else
   {
    Txt3answer.display='none';
   }
}
}

14的代码只是打开一个Txt3answer 啊·· 如果我目前有 Txt1answer Txt2answer Txt3answer 都怎么样来控制啊··

<td>
<asp:RadioList id="d" runat="server">
<asp:ListItem onclick="check(this)" >1.篮球 </asp:ListItem>
<asp:ListItem onclick="check(this)" ">2.足球 </asp:ListItem>
<asp:ListItem onclick="check(this)">3.羽毛球 </asp:ListItem>
<asp:ListItem onclick="check(this)">4.其他 </asp:ListItem>
</asp:RadioList>
<input id="Txt3answer" type="text" style="width: 480px"  runat="server" > </td>.....<td>
<asp:RadioList id="d5" runat="server">
<asp:ListItem onclick="check(this)" >1.篮球 </asp:ListItem>
<asp:ListItem onclick="check(this)" ">2.足球 </asp:ListItem>
<asp:ListItem onclick="check(this)">3.羽毛球 </asp:ListItem>
<asp:ListItem onclick="check(this)">4.其他 </asp:ListItem>
</asp:RadioList>
<input id="Txt5answer" type="text" style="width: 480px"  runat="server" > </td>原理是一样的<script language="javascript">
       function check(obj)
       {
          var table=obj.parentNode.parentNode.parentNode.parentNode;
          var checks=table.getElementsByTagName("input");
          var input=null;
          for(var i=0;i<checks.length;i++)
          {
             if(checks[i].type=="text")
             {
                input=check[i];
                break;
             }
          }
          if(obj.text=='4.其他')
          {
              input.display='block';
          }
          else
          {
              input.display='none';          }
        }
    </script>

简单的解决办法，Page.SmartNavigation = True;或者用前端代码代码来实现，就不用刷新了。

text的name和id的规则根据radiobuttonlist的id来作为前缀，然后加上_txt作为名字
还有一点需要注意，其他选项要放到最后<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<script>
document.onclick=function(e){
  e=e||event;
  var o=e.srcElement||e.target;
  if(o.tagName=="INPUT"&&o.type=="radio"){
   //获取radiobuttonlist生成的tbody和上级节点table
    //            td          tr         tbody
    var tbody=o.parentNode.parentNode.parentNode
    var table=tbody.parentNode;;
    var id=table.id;
    var txt=document.getElementById(id+"_txt")//通过id获取动态生成的input
       ,inputs=table.getElementsByTagName("input"); //获取此table下的所有input控件
    if(txt){//已经动态生成text
      if(!inputs[inputs.length-2].checked){//注意这里，此时最后一个radio是倒数第二个input，如果不是这个被选择就是其他被选择，所以要删除
        tbody.rows[tbody.rows.length-1].cells[0].removeChild(txt);
      }
    }
    else{
      if(inputs[inputs.length-1].checked){//因为没有生成，所以最后一个input就是radio了
        o.parentNode.innerHTML+='<input id="'+id+'_txt" name="'+id+'_txt" type="text" style="width:480px"/>';//注意id和name的命名规则
      }
    }
  }
}</script><br />
<table id="rbl1" border="0">
<tr>
<td><input id="rbl1_0" type="radio" name="rbl" value="WarIII " /><label for="rbl_0">1.WarIII </label></td>
</tr><tr>
<td><input id="rbl1_2" type="radio" name="rbl" value="CS" /><label for="rbl_1">2.CS</label></td>
</tr><tr>
<td><input id="rbl1_3" type="radio" name="rbl" value="其他" /><label for="rbl_2">3.其他 </label></td>
</tr>
</table>
<br />
<table id="rbl" border="0">
<tr>
<td><input id="rbl_0" type="radio" name="rbl" value="篮球" /><label for="rbl_0">1.篮球 </label></td>
</tr><tr>
<td><input id="rbl_1" type="radio" name="rbl" value="足球" /><label for="rbl_1">2.足球 </label></td>
</tr><tr>
<td><input id="rbl_2" type="radio" name="rbl" value="羽毛球" /><label for="rbl_2">3.羽毛球 </label></td>
</tr><tr>
<td><input id="rbl_3" type="radio" name="rbl" value="其他" /><label for="rbl_3">4.其他 </label></td>
</tr>
</table>
<br />
<table id="rbl2" border="0">
<tr>
<td><input id="Radio1" type="radio" name="rbl" value="A" /><label for="rbl_0">1.A </label></td>
</tr><tr>
<td><input id="Radio2" type="radio" name="rbl" value="B" /><label for="rbl_1">2.B </label></td>
</tr><tr>
<td><input id="Radio3" type="radio" name="rbl" value="C" /><label for="rbl_2">3.C </label></td>
</tr><tr>
<td><input id="Radio4" type="radio" name="rbl" value="其他" /><label for="rbl_3">4.其他 </label></td>
</tr>
</table>
</body>
</html>

调试易

CheckBoxList1的事件

解决方案 »