首页 新闻 搜索 专区 学院

关于Datalist 的checkbox 的选择校验

0
悬赏园豆:5 [已关闭问题] 关闭于 2012-12-06 07:44

我设计一个人物投票的系统,质量奖 人物 列表用datalist 来显示,在datalist 内显示 人物照片,人物姓名 用checkbox 来 表示选择,当用户投票的时候,质量奖 的候选人最多可以选择 4个人,不知道怎么控制选中的数量,用javascript 还是jquery ? 当然可以在提交的时候遍历datalist 内的checkbox 的数量,但是那样不够友好。希望高手指点一下。

 <asp:DataList ID="V1_DL" runat="server" RepeatColumns="6" 
                                    RepeatDirection="Horizontal">
                                    <ItemTemplate>
                                        <table style="margin: 2px; border: 2px solid #FF9900; width:130px; background-color: #FFFFFF;">
                                            <tr>
                                                <td align="center" class="style3">
                                                    <asp:Image ID="V1_img" runat="server" Height="150px" 
                                                        ImageUrl='<%# DataBinder.Eval(Container.DataItem, "Emp_Img" ) %>' 
                                                        Width="130px" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="style3" style="text-align: center">
                                                    <asp:CheckBox ID="V1_CB"  runat="server" Font-Size="Small" 
                                                        Text='<%# DataBinder.Eval(Container.DataItem, "Emp_Name" ) %>' />
                                                        
                                                </td>
                                            </tr>
                                        </table>
                                    </ItemTemplate>
                                </asp:DataList>

使用 javascript

<script type="text/jscript">
        function checkboxnum() {
            var form = document.forms['form1'];
            var i, j = 0;
         
            for (i = 0; i < form.length; i++) {
                var e = form[i];
                if (e.checked && e.type == 'checkbox' && e.name.substr(0,5).toString() == 'V1_DL') {
                    j++;
       if (j ==1){
           alert("最多只能选择1项!");
           e.checked = false;
           return false;
           break;
       }
                }
            }
        }
        </script>

在datalist 的databind 事件内未checkbox 绑定事件

protected void V1_DL_ItemDataBound(object sender, DataListItemEventArgs e)
    {
        foreach ( DataListItem dli in V1_DL.Items )
        {
            CheckBox ch = dli.FindControl ( "V1_CB" ) as CheckBox;
            ch.Attributes.Add ( "onclick", "checkboxnum()" );
        }
    }


是否可以?

 

问题补充:
  <table style="margin: 2px; border: 2px solid #FF9900; width:130px; background-color: #FFFFFF;">
                                            <tr>
                                                <td align="center" class="style3">
                                                    <img id="V1_DL_ctl00_V1_img" src="vote_upfile/20121113120709510725.jpg" style="height:150px;width:130px;border-width:0px;" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="style3" style="text-align: center; font-size: small;">
                                                    <span style="font-size:Small;"><input id="V1_DL_ctl00_V1_CB" type="checkbox" name="V1_DL$ctl00$V1_CB" onclick="checkboxnum();" /><label for="V1_DL_ctl00_V1_CB">冯xx</label></span>
                                                    &nbsp;</td>
                                            </tr>
                                        </table>
                                    </td><td>
                                        <table style="margin: 2px; border: 2px solid #FF9900; width:130px; background-color: #FFFFFF;">
                                            <tr>
                                                <td align="center" class="style3">
                                                    <img id="V1_DL_ctl01_V1_img" src="vote_upfile/20121113025524000657.jpg" style="height:150px;width:130px;border-width:0px;" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td class="style3" style="text-align: center; font-size: small;">
                                                    <span style="font-size:Small;"><input id="V1_DL_ctl01_V1_CB" type="checkbox" name="V1_DL$ctl01$V1_CB" /><label for="V1_DL_ctl01_V1_CB">王xx</label></span>
                                                    &nbsp;</td>
                                            </tr>
                                        </table>
                                    </td><td></td><td></td><td></td><td></td>
    </tr>
</table>

为何第一个checkbox 有onclick() ,第二个无onclick()?

figofeng的主页 figofeng | 初学一级 | 园豆:5
提问于:2012-11-16 16:03
< >
分享
所有回答(4)
0

用Jquery简单些吧。 <asp:CheckBox ID="V1_CB">  这里的这个ID="V1_Cb_xxxx" 确保这个值不一样、、

然后用Jquey取值   在CheckBox加个事件  这时候点击时  $("V1_Cb_xxxx")  然后将取到的值保存到数组中吧。。然后判断 大于4提醒用户。。在提交时。。将4个值提交、、

在 水 一 方 | 园豆:1097 (小虾三级) | 2012-11-16 16:19

能否给一个详细点的代码啊?小弟不太懂jquery

支持(0) 反对(0) figofeng | 园豆:5 (初学一级) | 2012-11-16 16:49
0

Javascript和就Query都可以。不知道你有没有jQuery插件,没有的话下载一个,然后在页面的head部分加入对jQuery的引用。

具体代码:

$(function(){//

$("[id$='V1_CB']").click(function(){

if($(this).checked){

if($("[id$='V1_CB']").find("[checked='true']").length >4){

alert("最好选择4个!");

return false;}

}

});

})

 

徒手写的,没有经过调试。希望对你有帮助。

欢迎讨论!

jone_e | 园豆:1410 (小虾三级) | 2012-11-17 15:02

好像没效果啊

支持(0) 反对(0) figofeng | 园豆:5 (初学一级) | 2012-11-19 13:12

@figofeng: 忘了告诉你了,jQuery对用UpdatePanel包裹的元素在页面第一次加载的时候是有效的,但是当UpdatePanel包裹的元素通过UpdatePanel的ajax与服务器交互了以后就没有失效了。原因是jQuery的事件是在页面加载的时候绑定上去的,而UpdatePanel语服务器交互了以后,这写绑定的事件就取消了,因为UpdatePanel并不是真正的局部刷新,实际上还是将所有的数据提交上去了。 不建议用UpdatePanel。。

支持(0) 反对(0) jone_e | 园豆:1410 (小虾三级) | 2012-11-19 15:38

@jone_e: 没有使用updatepanel ,

支持(0) 反对(0) figofeng | 园豆:5 (初学一级) | 2012-11-20 15:20
 $(function() {
            $("[id$='V1_CB']").click(function() {
                if (this.checked) {
                    if ($("[id$='V1_CB']:checked").length > 3) {
                        alert("最多4个!");
                        return false;
                    }
                }
            });
        })

 

@figofeng: 下面的代码是经过测试的,有问题欢迎语我讨论。

支持(0) 反对(0) jone_e | 园豆:1410 (小虾三级) | 2012-11-20 18:01
0

在问题表里面加两个字段

edsonwu | 园豆:146 (初学一级) | 2012-11-20 10:51
0
 <script type="text/jscript">
        function checkboxnum(cc) {
            var form = document.forms['form1'];
            var i, j = 0;
         
            for (i = 0; i < form.length; i++) {
                var e = form[i];
                if (e.checked && e.type == 'checkbox' && e.name.substr(0, 5).toString() == cc) {
                    j++;
       if (j >4){
           alert("最多只能选择4个候选人!");
           e.checked = false;
           return false;
           break;
       }
                }
            }
}

        </script>
figofeng | 园豆:5 (初学一级) | 2012-11-30 14:53
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册