DataList模板列中CheckBox的选中数目的判断

ljqingas 2011-09-22 08:40:42

做了个投票系统，用的是DataList，其中用CheckBox来投票，但是遇到问题：我设置的投票的数目是10个，我想在投票时可以实时地在页面中显示投了几票，还剩几票能用CheckBox的CheckedChanged事件来实现但是这个每次投票都要刷新页面感觉不是太好不知道有什么更好的解决方法么最好不是用脚本语言的谢谢

...全文

98 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

guotao0609 2011-09-23

打赏
举报

额，刚贴错了看这个吧
JS：



<script language="JavaScript" type="text/JavaScript">

<!--		

	function UnCheck(chk)

    {

        var iAll=0,iChk=0;

        if(!chk.checked)

        {

                //document.forms[0].item[chkAll].checked = false;

                //document.forms[0].chkAll.checked = false;

        }

        else

        {

            for (var i=0;i < document.forms[0].elements.length;i++)

            {

                var e = document.forms[0].elements[i];

                if (e.type == "checkbox")

                {

                    iAll++;

                    if (e.checked)

                    {

                            iChk++;

                    }                                                                                                                                                

                }

            }

            if(iChk == (iAll - 1))

            {

                    //document.forms[0].chkAll.checked = true;

            }

        }

    }

    function CheckAllQE(chkl)

    {

      //alert(chkl);

		

		  if(chkl.length==undefined)

		  {

			   chkl.checked=true;

		  }

		  else

		  {

			  for(i=0;i<chkl.length;i++)

			  {

                  chkl[i].checked=true;

			  }

		  }

		  SelectCount()

    }

    function ClearAllQE(chkl)

    {

		  if(chkl.length==undefined)

		  {

			   chkl.checked=false;

		  }

		  else

		  {

			  for(i=0;i<chkl.length;i++)

			  {	

                  chkl[i].checked=false;

			  }

      }

      SelectCount()

    }

    function f()

    {

		

        if(document.forms[0].chkAll.checked)

        {

			

                if(document.forms[0].chkid.length==undefined)

                {

                        document.forms[0].chkid.checked=true;

                }

                else

                {   					 

                        for(i=0;i<document.forms[0].chkid.length;i++)

                        {

                                document.forms[0].chkid[i].checked=true;

                        }

                }

        }

        else

        {

                if(document.forms[0].chkid.length==undefined)

                {

                        document.forms[0].chkid.checked=false;

                }

                else

                {        

                        for(i=0;i<document.forms[0].chkid.length;i++)

                        {

                                document.forms[0].chkid[i].checked=false;

                        }

                }



        }

    }

    function SelectCount()

	  {

        <asp:Literal ID="lblJsSelectCount" runat="server"></asp:Literal>

			  var num = 0;

			  for (i = 0; i < document.forms[0].elements.length; i++)

			  {

					  if(document.forms[0].elements[i].type == 'checkbox')

					  {

						   if (document.forms[0].elements[i].checked)

						   {

						 	    num++;

						   }

					  }

			  }

			  document.all.yx.innerText = num;

			  if (mf - num >= 0)

			  {

			    objMF.innerText = mf - num;

			  }

			  else

			  {

			    objMF.innerText = 0;

			  }

			  if (jf - num + mf >= 0)

			  {

			    if (mf - num >= 0)

			    {

			      objJF.innerText = jf;

          }

          else

          {

            objJF.innerText = jf - num + mf;

          }

			  }

			  else

			  {

			      objMF.innerText = 0

			      objJF.innerText = 0

			  }

	  }

    //-->

</script>

HTML:



<table cellSpacing="0" cellPadding="0" width="100%" id="tbQuestion" runat="server">

  <tr>

	  <td colspan="2">

	    <asp:DataList ID="dlQuestionType" runat="server" RepeatColumns="4" Width="100%">

        <ItemTemplate>

          <table cellspacing="0" cellpadding="0" width="100%" style="border-bottom:solid 1px #cccccc;border-top:solid 1px #cccccc;border-left:solid 1px #cccccc;border-right:solid 1px #cccccc;">

            <tr>

              <td colspan="2" width="25%">

                <asp:image id="imgQuestionTypePic" runat="server"></asp:image>

                <asp:Label ID="lblQuestionType" runat="server" CssClass="NormalBold"></asp:Label>

                <A onclick="CheckAllQE(document.forms[0].chkid<%# DataBinder.Eval(Container.DataItem, "QuestionTypeID")%>);" href="javascript:void(0);"><asp:Label ID="lblSelectAll" runat="server" CssClass="Normal" resourcekey="lblSelectAll"></asp:Label></A>

                	- <A onclick="ClearAllQE(document.forms[0].chkid<%# DataBinder.Eval(Container.DataItem, "QuestionTypeID")%>);" href="javascript:void(0);"><asp:Label ID="lblCancelAll" runat="server" CssClass="Normal" resourcekey="lblCancelAll"></asp:Label></A>

              </td>

            </tr>

            <tr>

              <td  valign="top">

               <div>

                <asp:datagrid id="dgQuestion" runat="server" Width="100%" BorderWidth="0px" autogeneratecolumns="False" CellSpacing="2" ShowHeader="false" OnItemDataBound="dgQuestion_ItemDataBound">

			            <AlternatingItemStyle BackColor="#EEEEEE"></AlternatingItemStyle>

			            <Columns>

			              <asp:TemplateColumn>

							          <ItemStyle CssClass="NormalBold"></ItemStyle>

							          <ItemTemplate>

							          	<input type="checkbox"  name="chkid<%# DataBinder.Eval(Container.DataItem, "QuestionTypeID")%>" value='<%# DataBinder.Eval(Container.DataItem, "QuestionID")%>' onclick='SelectCount()'  style="background-color:transparent" >

							            <asp:Label ID="lblQuestionContent" runat="server" CssClass="Normal"></asp:Label>

							          </ItemTemplate>

                              <HeaderStyle Width="5px" />

					          </asp:TemplateColumn>

			            </Columns>

		            </asp:datagrid>

		           </div>

              </td>

            </tr>

          </table>

        </ItemTemplate>

      </asp:DataList>

	  </td>

  </tr>

  <tr bgcolor="#eaebfa">

    <td width="30%">

      <table>

        <tr>

          <td>

            <asp:image id="imgSelected" runat="server" ImageUrl="/DesktopModules/YongRi - Evaluate/Images/icon.JPG"></asp:image>              

            <asp:Label ID="lblSelected" runat="server" CssClass="Normal" resourcekey="lblSelected"></asp:Label>

            <asp:Label ID="lblShowSelected" runat="server" CssClass="Normal"><span id="yx">0</span></asp:Label>

          </td>

        </tr>

        <tr>

          <td>

            <asp:image id="imgUnSelected" runat="server" ImageUrl="/DesktopModules/YongRi - Evaluate/Images/icon.JPG"></asp:image> 

            <asp:Label ID="lblUnSelected" runat="server" CssClass="Normal" resourcekey="lblUnSelected"></asp:Label>

            <asp:Label ID="lblShowUnSelected" runat="server" CssClass="Normal"></asp:Label>

          </td>

        </tr>

        <tr>

          <td>

            <asp:image id="imgBonus" runat="server" ImageUrl="/DesktopModules/YongRi - Evaluate/Images/icon.JPG"></asp:image> 

            <asp:Label ID="lblBonus" runat="server" CssClass="Normal" resourcekey="lblBonus"></asp:Label>

            <asp:Label ID="lblShowBonus" runat="server" CssClass="Normal"></asp:Label>

          </td>

        </tr>

      </table>

    </td>

  </tr>

</table>

guotao0609 2011-09-23

打赏
举报

我之前一个项目和你的需求很相似，把代码贴出来你参考下吧：
CSS:



<style type="text/css">

<!--

.LP

{

	width:174px;

	height:21px;

	background-image:url(DesktopModules/YongRi%20-%20Evaluate/Images/spit_bg.jpg)!important;

	text-align:left;

	float:left;

}

.Layer {

	width:16px;

	height:21px;

	background-image:url(DesktopModules/YongRi%20-%20Evaluate/Images/spit.gif) !important;

	cursor:hand;

	margin-left:79px;

}

-->

</style>

JS：



<script language="JavaScript" type="text/JavaScript">

<!--					

	function UnCheck(chk)

    {

        var iAll=0,iChk=0;

        if(!chk.checked)

        {

                //document.forms[0].item[chkAll].checked = false;

                //document.forms[0].chkAll.checked = false;

        }

        else

        {

            for (var i=0;i < document.forms[0].elements.length;i++)

            {

                var e = document.forms[0].elements[i];

                if (e.type == "checkbox")

                {

                    iAll++;

                    if (e.checked)

                    {

                            iChk++;

                    }                                                                                                                                                

                }

            }

            if(iChk == (iAll - 1))

            {

                    //document.forms[0].chkAll.checked = true;

            }

        }

    }

      function CheckAll()

    {

		

		if(document.forms[0].chkid.length==undefined)

		{

			 document.forms[0].chkid.checked=true;

		}

		else

		{

			for(i=0;i<document.forms[0].chkid.length;i++)

			{

                document.forms[0].chkid[i].checked=true;

			}

		}

    }

     function ClearAll()

    {

		if(document.forms[0].chkid.length==undefined)

		{

			 document.forms[0].chkid.checked=false;

		}

		else

		{

			for(i=0;i<document.forms[0].chkid.length;i++)

			{	

                document.forms[0].chkid[i].checked=false;

			}

        }

    }

function f()

    {

		

        if(document.forms[0].chkAll.checked)

        {

			

                if(document.forms[0].chkid.length==undefined)

                {

                        document.forms[0].chkid.checked=true;

                }

                else

                {   					 

                        for(i=0;i<document.forms[0].chkid.length;i++)

                        {

                                document.forms[0].chkid[i].checked=true;

                        }

                }

        }

        else

        {

                if(document.forms[0].chkid.length==undefined)

                {

                        document.forms[0].chkid.checked=false;

                }

                else

                {        

                        for(i=0;i<document.forms[0].chkid.length;i++)

                        {

                                document.forms[0].chkid[i].checked=false;

                        }

                }



        }

    }

    //-->

</script>

绑定控件代码：



<asp:datagrid id="dgSelectQuestion" runat="server" Width="100%" BorderWidth="0px" autogeneratecolumns="False" CellSpacing="1" ShowFooter="true" ShowHeader="true">

        <AlternatingItemStyle BackColor="#EEEEEE"></AlternatingItemStyle>

        <Columns>

            <asp:BoundColumn DataField="QuestionGoodAnswer">

               <ItemStyle Wrap="False" HorizontalAlign="Center" CssClass="Normal"></ItemStyle>

            </asp:BoundColumn>

            <asp:TemplateColumn>

	            <ItemStyle HorizontalAlign="Center" CssClass="Normal" Width="200px"></ItemStyle>

	            <ItemTemplate>

                    <div id="LP<%# DataBinder.Eval(Container.DataItem, "QuestionID") %>" class="LP"><div id="Layer<%# DataBinder.Eval(Container.DataItem, "QuestionID") %>" class="Layer"></div></div>

                    <input type="hidden" name="sp<%# DataBinder.Eval(Container.DataItem, "QuestionID") %>" id="sp<%# DataBinder.Eval(Container.DataItem, "QuestionID") %>" value="50" />

	            </ItemTemplate>

            </asp:TemplateColumn>

            <asp:BoundColumn DataField="QuestionBadAnswer">

               <ItemStyle Wrap="False" HorizontalAlign="Center" CssClass="Normal"></ItemStyle>

            </asp:BoundColumn>

            <asp:TemplateColumn HeaderText="NoEvaluate">

              <HeaderStyle CssClass="NormalBold" HorizontalAlign="Center"></HeaderStyle>

	            <ItemStyle HorizontalAlign="Center" CssClass="Normal"></ItemStyle>

	            <ItemTemplate>

                <asp:ImageButton ID="cmdNotComment" runat="server" CssClass="Normal" Visible="false"></asp:ImageButton>

								<input type="checkbox" name="chkid" value='<%# DataBinder.Eval(Container.DataItem, "QuestionID")%>' onclick='UnCheck(this)'  style="background-color:transparent" >

              </ItemTemplate>

            </asp:TemplateColumn>

            <asp:TemplateColumn HeaderText="Commment">

              <HeaderStyle CssClass="NormalBold" HorizontalAlign="Center"></HeaderStyle>

	            <ItemStyle HorizontalAlign="Center" CssClass="Normal" Width="250px"></ItemStyle>

	            <ItemTemplate>

	              <input type="text" name="txt<%# DataBinder.Eval(Container.DataItem, "QuestionID") %>" id="txt<%# DataBinder.Eval(Container.DataItem, "QuestionID") %>" style="width: 250"/>

	            </ItemTemplate>

            </asp:TemplateColumn>

        </Columns>

      </asp:datagrid>

weimeishuxi 2011-09-23

打赏
举报

[Quote=引用 2 楼 taomanman 的回复:]

不用脚本语言？？？那你是说javascript都不用？？
那你还是使用ajax吧，将你的DataList放在一个UpdatePanel中来操作，也可以实现无刷新
[/Quote]

这就是传说中的ajax，我也不熟，详细点，谢谢。。。。

十二点咖啡 2011-09-23

打赏
举报

mark

ljqingas 2011-09-22

打赏
举报

对Js Ajax不是很熟希望能详细下啊

暖枫无敌 2011-09-22

打赏
举报

不用脚本语言？？？那你是说javascript都不用？？
那你还是使用ajax吧，将你的DataList放在一个UpdatePanel中来操作，也可以实现无刷新

guotao0609 2011-09-22

打赏
举报

js啦
DataList 用<input type="checkbox" name="chkid" value='问题ID' onclick='SelectCount()'
function SelectCount() 方法获取所有选中的checkbox并计算数量在和你设置的票数作对比
后台如果想获取选中的问题的ID的话只需要this.request.form["chkid"] 就是已选中的，已逗号隔开的。拆分开就可以处理了
代码不写了自己动手试下吧