使用 javascript 验证复选框选择答案

【问题标题】：Validate checkbox selection using javascript使用 javascript 验证复选框选择
【发布时间】：2012-11-06 06:53:47
【问题描述】：

我需要帮助编写我需要做的自定义函数。

概念很简单：我向客户提供了大约 20 种产品的列表，然后我要求他们使用复选框从整个列表中选择 5 种产品。 p>

虽然他们确实选择了产品，但它需要更新隐藏的输入，以便我能够将其插入到我的数据库中。

我们可以从这样的东西开始：http://jsfiddle.net/9mxh5/ 但它只需要工作，所以我只能选择一些复选框。

这里有一些我们也可以使用的代码

<input type="checkbox" name="products" value="product1" onChange="javascript:updateProducts();"/>
<input type="checkbox" name="products" value="product2" onChange="javascript:updateProducts();"/>
<input type="checkbox" name="products" value="product3" onChange="javascript:updateProducts();"/>
<input type="checkbox" name="products" value="product4" onChange="javascript:updateProducts();"/>

<!-- Hidden -->
<input type="hidden" name="myFiveProducts" value="THELIST" />

我在那里使用了 jsfiddle 并像我想做的那样对其进行了调整：http://jsfiddle.net/ENxnK/15/

提前感谢您的帮助。

【问题讨论】：

这对你有用。那么有什么问题。我的意思是你想要什么？
jsfiddle 不是我的。我希望能够计算“已选中”框的数量，当我在 5 点选中时，我无法检查新的。
如果你得到你想要的信息，不要忘记投票并将答案标记为已接受

标签： javascript validation checkbox

【解决方案1】：

我已经给出了 3 的条件。您可以将其更改为 5，我认为您可以自己分配隐藏变量。如果我不能然后让我知道。我会更新的

<script type="text/javascript">
var i=0;
    function updateProducts(myid)
{

    if(document.getElementById(myid).checked==true)
    {i=i+1;

    if(i==3)
    {
    document.getElementById("products1").disabled="disabled";
    document.getElementById("products2").disabled="disabled";
    document.getElementById("products3").disabled="disabled";
    document.getElementById("products4").disabled="disabled";
    }
    }
    else
    i=i-1;
}
</script>
    <div id="mydiv">
<input type="checkbox" id="products1" value="product1" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products2" value="product2" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products3" value="product3" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products4" value="product4" onChange="javascript:updateProducts(this.id);"/>
</div>

【讨论】：

我明白了，但是如果我希望能够取消选中是否需要不同的选择怎么办？喜欢：选中的保持开启状态，未选中的变为禁用？

【解决方案2】：

@polin

我找到了一种方法来做我想做的事，但这不是很优化..

我正在使用 Class 来确定是否选中了哪个。然后我只是确保它没有类禁用它。

只需要更好的代码：D

javascript

var i = 0;
function updateProducts(myid)
{

    if(document.getElementById(myid).checked == true)
    {
        // Add a class to the element
        document.getElementById(myid).className = "classCheck";

        i = i + 1;

        // If I got my maximum
        if(i == 3)
        {
            if(!$('#products1').hasClass('classCheck'))
            {
                document.getElementById("products1").disabled="disabled";
            }
            if(!$('#products2').hasClass('classCheck'))
            {
                document.getElementById("products12").disabled="disabled";
            }
            if(!$('#products3').hasClass('classCheck'))
            {
                document.getElementById("products3").disabled="disabled";
            }
            if(!$('#products4').hasClass('classCheck'))
            {
                document.getElementById("products4").disabled="disabled";
            }
        }   
    }
    else
    {
        document.getElementById(myid).className = "";
        i = i - 1;

        // If I'm not at the maximum
        if(i < 3)
        {
            // I can switch them all enable
            $('#products1').removeAttr('disabled');
            $('#products2').removeAttr('disabled');
            $('#products3').removeAttr('disabled');
            $('#products4').removeAttr('disabled');
        }
    }
}

HTML

<div id="mydiv">
<input type="checkbox" id="products1" value="product1" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products2" value="product2" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products3" value="product3" onChange="javascript:updateProducts(this.id);"/>
<input type="checkbox" id="products4" value="product4" onChange="javascript:updateProducts(this.id);"/>
</div>

【讨论】：