使用javascript或jquery检查最多3个复选框 [英] Having max 3 checkboxes checked using javascript or jquery
本文介绍了使用javascript或jquery检查最多3个复选框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
< div class =texti>
< p>< p>< / p>< h1> ATHUG< / h1>< p> baratvöálegg！< / p>
< / div>
< br>< br>
< div class =col-lg-2>
< h4> Kjötálegg< / h4>
< form action =includes / pizzaprocess.phpmethod =POSTname =theform>
< input type =checkboxname =meat []value =1onClick =return KeepCount（）> Pepperoni< br>
< input type =checkboxname =meat []value =2onClick =return KeepCount（）> Skinka< br>
< input type =checkboxname =meat []value =3onClick =return KeepCount（）> Nautahakk< br>
< input type =checkboxname =meat []value =4onClick =return KeepCount（）> Beikon< br>
< input type =checkboxname =meat []value =5onClick =return KeepCount（）> Auka Pepperoni< br>
< input type =checkboxname =meat []value =6onClick =return KeepCount（）>Kjúklingur< br>
< / div>
< div class =col-lg-2>
< h4> Ostar< / h4>
< input type =checkboxname =cheese []value =7onClick =return KeepCount（）>Gráðostur< br>
< input type =checkboxname =cheese []value =8onClick =return KeepCount（）> Cheddarostur< br>
< input type =checkboxname =cheese []value =9onClick =return KeepCount（）> Extra Ostur< br>
< input type =checkboxname =cheese []value =10onClick =return KeepCount（）>LítillOstur< br>
< input type =checkboxname =cheese []value =11onClick =return KeepCount（）> Enginn Ostur< br>
< input type =checkboxname =cheese []value =12onClick =return KeepCount（）>Rjómaostur< br>
< input type =checkboxname =cheese []value =13onClick =return KeepCount（）> Piparostur< br>
< / div>
< div class =col-lg-2>
< h4> Grænt< / h4>
< input type =checkboxname =greens []value =14onClick =return KeepCount（）>GrænPapripa< br>
< input type =checkboxname =greens []value =15onClick =return KeepCount（）> Laukur< br>
< input type =checkboxname =greens []value =16onClick =return KeepCount（）>Tómatsneið< br>
< input type =checkboxname =greens []value =17onClick =return KeepCount（）> Sveppir< br>
< input type =checkboxname =greens []value =18onClick =return KeepCount（）>凤梨< br>
< input type =checkboxname =greens []value =19onClick =return KeepCount（）> Jalapenos< br>
< input type =checkboxname =greens []value =20onClick =return KeepCount（）> SvartarÓlífur< br>
< input type =checkboxname =greens []value =21onClick =return KeepCount（）>Hvítlaukur< br>
< input type =checkboxname =greens []value =22onClick =return KeepCount（）>Rauðlaukur< br>
< input type =checkboxname =greens []value =23onClick =return KeepCount（）>Spínat< br>
< input type =submit/>
< / form>
< / div>
我希望使用javascript将它们限制为两个，像这样：
< script type =text / javascript>
函数KeepCount（）
{
var NewCount = 0
if（document.theform.meat []。checked）
{ NewCount = NewCount + 1}
if（document.theform.cheese []。checked）
{NewCount = NewCount + 1}
if（document.theform （NewCount == 3）
{
alert（'Pick Just Two Please'.greens []。checked）
{NewCount = NewCount + 1}
if ）
document.first，second，thinrd;返回false;
}
}
< / script>
请忽略它在冰岛的事实，请提前致谢！
解决方案
使用jquery
< script>
$（）。ready（函数（）{
//您在这里打上'名字'
var groups = ['meat []'，'cheese []'， 'greens []'];
//为每个组。 。查找
var $ group = $（'。col-lg-2'）中的所有复选框。find（'input [name =''+ groupName +''''）;
//捕捉点击
$ group.click（{group：$ group}，function（event）{
//点击事件计算选中复选框的总和
var count = 0;
$ .each（event.data.group，function（idx，input）{
count + =（input.checked？1：0）;
}）; //输入组中的每个输入
//警告用户
if（count> 2）{
alert（'2 only！'）;
event.preventDefault（）;
return;
}
}）;
}）; //每个顶部
}）;
< / script>
jsFiddle： http://jsfiddle.net/qAsR3/
So I have this pizza-ordering application for my final project, but I need to have the max amounts of toppings be two, so I have to limit my checkable checkboxes to two, I was thinking of doing this with Javascript but I haven't been successfull so far, here is my HTML code:
<div class="texti">
<p>Hér getið þið valið ykkar egin álegg </p><h1>ATHUGIÐ</h1><p> bara tvö álegg!</p>
</div>
<br><br>
<div class ="col-lg-2">
<h4> Kjötálegg </h4>
<form action="includes/pizzaprocess.php" method="POST" name = "theform">
<input type="checkbox" name="meat[]" value="1" onClick="return KeepCount()">Pepperoni <br>
<input type="checkbox" name="meat[]" value="2" onClick="return KeepCount()">Skinka <br>
<input type="checkbox" name="meat[]" value="3" onClick="return KeepCount()">Nautahakk <br>
<input type="checkbox" name="meat[]" value="4" onClick="return KeepCount()">Beikon <br>
<input type="checkbox" name="meat[]" value="5" onClick="return KeepCount()">Auka Pepperoni <br>
<input type="checkbox" name="meat[]" value="6" onClick="return KeepCount()">Kjúklingur <br>
</div>
<div class="col-lg-2">
<h4> Ostar </h4>
<input type="checkbox" name="cheese[]" value="7" onClick="return KeepCount()">Gráðostur <br>
<input type="checkbox" name="cheese[]" value="8" onClick="return KeepCount()">Cheddarostur <br>
<input type="checkbox" name="cheese[]" value="9" onClick="return KeepCount()">Extra Ostur <br>
<input type="checkbox" name="cheese[]" value="10" onClick="return KeepCount()">Lítill Ostur <br>
<input type="checkbox" name="cheese[]" value="11" onClick="return KeepCount()">Enginn Ostur <br>
<input type="checkbox" name="cheese[]" value="12" onClick="return KeepCount()">Rjómaostur <br>
<input type="checkbox" name="cheese[]" value="13" onClick="return KeepCount()">Piparostur <br>
</div>
<div class="col-lg-2">
<h4> Grænt </h4>
<input type="checkbox" name="greens[]" value="14" onClick="return KeepCount()">Græn Papripa<br>
<input type="checkbox" name="greens[]" value="15" onClick="return KeepCount()">Laukur<br>
<input type="checkbox" name="greens[]" value="16" onClick="return KeepCount()">Tómatsneiðar<br>
<input type="checkbox" name="greens[]" value="17" onClick="return KeepCount()">Sveppir<br>
<input type="checkbox" name="greens[]" value="18" onClick="return KeepCount()">Ananas<br>
<input type="checkbox" name="greens[]" value="19" onClick="return KeepCount()">Jalapenos<br>
<input type="checkbox" name="greens[]" value="20" onClick="return KeepCount()">Svartar Ólífur<br>
<input type="checkbox" name="greens[]" value="21" onClick="return KeepCount()">Hvítlaukur<br>
<input type="checkbox" name="greens[]" value="22" onClick="return KeepCount()">Rauðlaukur<br>
<input type="checkbox" name="greens[]" value="23" onClick="return KeepCount()">Spínat<br>
<input type="submit"/>
</form>
</div>
I was hoping to use javascript to limit them to two using something like this:
<script type="text/javascript">
function KeepCount()
{
var NewCount = 0
if (document.theform.meat[].checked)
{NewCount = NewCount + 1}
if (document.theform.cheese[].checked)
{NewCount = NewCount + 1}
if (document.theform.greens[].checked)
{NewCount = NewCount + 1}
if (NewCount == 3)
{
alert('Pick Just Two Please')
document.first,second,thinrd; return false;
}
}
</script>
Please ignore the fact it's in Icelandic please, and thank you in advance!
解决方案
With jquery
<script>
$().ready(function () {
// your topping 'names' here
var groups = ['meat[]', 'cheese[]', 'greens[]'];
// for each group..
$.each(groups, function (idx, groupName) {
// ..find all checkboxes inside
var $group = $('.col-lg-2').find('input[name="' + groupName + '"]');
// and catch click
$group.click({ group: $group }, function (event) {
// on click event calculate sum of checked checkboxes
var count = 0;
$.each(event.data.group, function (idx, input) {
count += (input.checked ? 1 : 0);
}); // each input in group
// warning the user
if (count > 2) {
alert('2 only!');
event.preventDefault();
return;
}
});
}); // each topping
});
</script>
jsFiddle: http://jsfiddle.net/qAsR3/
这篇关于使用javascript或jquery检查最多3个复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
