[英]Validate checkbox selection using javascript
I need help with the coding of a custom function that I need to do. 我需要有关需要做的自定义函数编码的帮助。
The concept is simple : I offer the customer a list of ~20 products and then I ask them to select 5 products from the entire list using checkboxes. 概念很简单 : 我向客户提供约20种产品的列表,然后要求他们使用复选框从整个列表中选择5种产品。
And while they do select the products, it needs to update an hidden input so I will be able to insert it in my database. 当他们确实选择产品时,它需要更新一个隐藏的输入,以便能够将其插入到我的数据库中。
We could be starting with something like this : http://jsfiddle.net/9mxh5/ but it only needs to be work so I can only select a number of checkboxes. 我们可以从这样的东西开始: http : //jsfiddle.net/9mxh5/,但是它只需要工作,所以我只能选择许多复选框。
Here is some code we could use too 这也是我们也可以使用的一些代码
<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" />
I have used the jsfiddle up there and adapt it like I would like to do : http://jsfiddle.net/ENxnK/15/ 我在那里使用过jsfiddle并对其进行调整,就像我想做的那样: http : //jsfiddle.net/ENxnK/15/
Thx in advance for your help. 事先感谢您的帮助。
I've given condition for 3. You can change it to 5 and i think you can assign your hidden variable by yourself. 我给了3条件。您可以将其更改为5,我认为您可以自己分配隐藏变量。 If i can't then let me know .
如果不能的话,让我知道。 I'll update it
我会更新
<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>
@polin @polin
I found a way to do what I wanted but this is not very optimsed.. 我找到了一种方法来做我想做的事,但这并不是很优化。
I am using Class to determine wich one is checked and not. 我正在使用Class确定是否检查了哪一个。 Then I just make sure when it has not the class to disabled it.
然后,我只是确定何时没有该类禁用它。
Would only need a better code :D 只需要一个更好的代码:D
The javascript 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');
}
}
}
The HTML 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.