使用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屋!
查看全文