关于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> </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> </td> </tr> </table> </td><td></td><td></td><td></td><td></td> </tr> </table>
为何第一个checkbox 有onclick() ，第二个无onclick()?
所有回答(4)
0
用Jquery简单些吧。 <asp:CheckBox ID="V1_CB"> 这里的这个ID＝＂V１＿Cｂ＿ｘｘｘｘ＂ 确保这个值不一样、、
然后用Jquey取值 在CheckBox加个事件 这时候点击时 $("V１＿Cｂ＿ｘｘｘｘ") 然后将取到的值保存到数组中吧。。然后判断 大于4提醒用户。。在提交时。。将4个值提交、、
能否给一个详细点的代码啊？小弟不太懂jquery
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;}
}
});
})
徒手写的，没有经过调试。希望对你有帮助。
欢迎讨论！
好像没效果啊
@figofeng: 忘了告诉你了，jQuery对用UpdatePanel包裹的元素在页面第一次加载的时候是有效的，但是当UpdatePanel包裹的元素通过UpdatePanel的ajax与服务器交互了以后就没有失效了。原因是jQuery的事件是在页面加载的时候绑定上去的，而UpdatePanel语服务器交互了以后，这写绑定的事件就取消了，因为UpdatePanel并不是真正的局部刷新，实际上还是将所有的数据提交上去了。 不建议用UpdatePanel。。
@jone_e: 没有使用updatepanel ,
$(function() { $("[id$='V1_CB']").click(function() { if (this.checked) { if ($("[id$='V1_CB']:checked").length > 3) { alert("最多4个！"); return false; } } }); })
@figofeng: 下面的代码是经过测试的，有问题欢迎语我讨论。
0
在问题表里面加两个字段
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>