问一个复选框限制选中个数的问题

wylovemzc 2009-03-10 01:33:37

请教高手，我在页面摆放一个CheckBoxList控件，我现在要做限制CheckBoxList选中的个数，这个要如何实现啊？谢谢各位

...全文

237 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

wylovemzc 2009-03-11

打赏
举报

阿非 2009-03-11

打赏
举报



    <script>

    var count=0;

    function onChange(obj)

    {        

        if(obj.checked)

        {       

            var sum=parseInt(document.getElementById('<%= hidCount.ClientID%>').value);     

            if(count>=sum)

            {

                obj.checked=false;

                //alert('只能选择两项');

                document.getElementById('<%= lbl.ClientID%>').innerText='只能选择'+sum+'项';

                document.getElementById('div').style.display='';

            }

            else            

            {

                count++;                                   

                document.getElementById('<%= lbl.ClientID%>').innerText='';

                document.getElementById('div').style.display='none';

            }

        }

        else        

        {

            count=count-1;                   

            document.getElementById('<%= lbl.ClientID%>').innerText='';

            document.getElementById('div').style.display='none';

        }

    }

    </script>



<asp:CheckBoxList ID="cbl"  runat="server">

    <asp:ListItem Text="A" onclick="onChange(this)"></asp:ListItem>

    <asp:ListItem Text="B" onclick="onChange(this)"></asp:ListItem>

    <asp:ListItem Text="C" onclick="onChange(this)"></asp:ListItem>

    <asp:ListItem Text="D" onclick="onChange(this)"></asp:ListItem>

    </asp:CheckBoxList>

    <asp:HiddenField ID="hidCount" runat="server" />

    <asp:Label ID="lbl" runat="server"></asp:Label>

    <div id="div" style=" background-color:Red;display:none" >

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

    </div>





        int tempCount = 3;//这里你可以赋读取数据库之后的值

        hidCount.Value = tempCount.ToString();

        lit.Text = "只能选择" + hidCount.Value + "项";

j45kp 2009-03-10

打赏
举报

//先获取所有的Checkbox
var chkList = document.getElementsByName("CheckBox1");
window.onload = function()
{
//为所有checkbox添加onclick事件处理，以自动更新“已选择的项”
for(var i=0; i<chkList.length; i++)
{
chkList[i].onclick = chkClick;
}
}
//checkbox的onclick事件，用于更新“已选择的项”
function chkClick(){
var checkedList = "";
//获取所有被选中的项
for(var i=0; i<chkList.length; i++){
if(chkList[i].checked)
checkedList += chkList[i].value + ",";
}
//把选中项的列表显示到“已选择的项”中，substring在这里是为了去除最后一个逗号
document.getElementById("HiddenField1").value = checkedList.substring(0,checkedList.length-1);
}
function checkAll()
{
var chkall=document.getElementById("CheckBoxAll");
if(chkall.checked)
{
var checkedList = "";
for(var i=0;i<chkList.length;i++)
{
chkList[i].checked=true;
checkedList += chkList[i].value + ",";
}
document.getElementById("HiddenField1").value = checkedList.substring(0,checkedList.length-1);
}
else
{
for(var i=0;i<chkList.length;i++)
chkList[i].checked=false;
document.getElementById("HiddenField1").value="";
}
}
</script>

阿非 2009-03-10

打赏
举报

如果你的CheckBoxList 的数据源是动态绑定的，可以用



protected void Page_Load(object sender, EventArgs e)

        {

            foreach (ListItem li in CheckBoxList1.Items)

                li.Attributes.Add("onclick", "onChange(this)");

        }

这种形式给每项增加 onclick事件

阿非 2009-03-10

打赏
举报

精简一下代码



<script>

    var count=0;

    function onChange(obj)

    {        

        if(obj.checked)

        {            

            if(count>=2)

            {

                obj.checked=false;

                alert('只能选择两项');

            }

            else            

                count++;                                   

        }

        else        

            count=count-1;                   

    }

    </script>



<asp:CheckBoxList ID="cbl"  runat="server">

    <asp:ListItem Text="A" onclick="onChange(this)"></asp:ListItem>

    <asp:ListItem Text="B" onclick="onChange(this)"></asp:ListItem>

    <asp:ListItem Text="C" onclick="onChange(this)"></asp:ListItem>

    <asp:ListItem Text="D" onclick="onChange(this)"></asp:ListItem>

    </asp:CheckBoxList>

xsm545 2009-03-10

打赏
举报

顶...学习了..

阿非 2009-03-10

打赏
举报



<input type="hidden" id="hidCount" value="0" />

阿非 2009-03-10

打赏
举报



<script>

    function onChange(obj)

    {

        var count=parseInt(document.getElementById('hidCount').value);

        if(obj.checked)

        {            

            if(count>=2)

            {

                obj.checked=false;

                alert('只能选择两项');

            }

            else

            {

                document.getElementById('hidCount').value=count+1;

            }            

        }

        else

        {

            document.getElementById('hidCount').value=count-1;

        }

    }

    </script>



<asp:CheckBoxList ID="cbl"  runat="server">

    <asp:ListItem Text="A" onclick="onChange(this)"></asp:ListItem>

    <asp:ListItem Text="B" onclick="onChange(this)"></asp:ListItem>

    <asp:ListItem Text="C" onclick="onChange(this)"></asp:ListItem>

    <asp:ListItem Text="D" onclick="onChange(this)"></asp:ListItem>

    </asp:CheckBoxList>

我姓区不姓区 2009-03-10

打赏
举报



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script type="text/javascript" >

        function limit(cbl) {

            var cbs = document.getElementById("<%= CheckBoxList1.ClientID %>").getElementsByTagName("input");

            var count = 0;

            for (var i = 0; i < cbs.length; i++) {

                if (cbs[i].type == "checkbox") {

                   if (cbs[i].checked) {

                        count++;

                    }

                }

            }

            if (count > 3) {

                cbl.checked = false;

                alert("不能多于3项");

                return;

            }

        }

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <asp:CheckBoxList ID="CheckBoxList1" runat="server">

        <asp:ListItem Text="1" Value="1"></asp:ListItem>

        <asp:ListItem Text="2" Value="2"></asp:ListItem>

        <asp:ListItem Text="3" Value="3"></asp:ListItem>

        <asp:ListItem Text="4" Value="4"></asp:ListItem>

        <asp:ListItem Text="5" Value="5"></asp:ListItem>

    </asp:CheckBoxList>

    </form>

</body>

</html>



        protected void Page_Load(object sender, EventArgs e)

        {

            foreach (ListItem li in CheckBoxList1.Items)

                li.Attributes.Add("onclick", "limit(this)");

        }