/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Checkbox Restriction

Copy linkTweet thisAlerts:
Nov 11.2008

Hi All,

I need your expertise, yet once again.

Does anyone know how to restrict the user from selecting more than x number of checkboxes?

For example, say I have 20 checkboxes, but I need to limit the user to selecting no more than 5. My checkboxes are coded as such:

<INPUT TYPE=CHECKBOX NAME=”GrpDay” value=”chk1”> 1
<INPUT TYPE=CHECKBOX NAME=”GrpDay” value=”chk2”> 2
<INPUT TYPE=CHECKBOX NAME=”GrpDay” value=”chk3”> 3
…

I’m now wondering if I can attach a javascript to the checkbox’s onClick event so that it does something like this:

if checked {
chkCount = chkCount + 1;
}
else {
chkCount = chkCount – 1;
}
if chkCount == 6 // +1 over the limit
{
alert(“bla”);
uncheck last checked checkbox;
chkCount = 5;
}

Any help will be greatly appreciated.

to post a comment
JavaScript

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@aj_nscNov 11.2008 — I think the best time to do this would be adding on onsubmit listener to the form rather than add a listener to each individual checkbox.
Copy linkTweet thisAlerts:
@FangNov 11.2008 — Add a listener to the form or div section rather than the checkboxes
Copy linkTweet thisAlerts:
@APDauthorNov 11.2008 — how?
Copy linkTweet thisAlerts:
@aj_nscNov 11.2008 — I'm much more of a point-in-the-right-direction kind of guy rather than handing out code. Others might be willing to give you the code itself.

http://www.w3schools.com/js/js_form_validation.asp
Copy linkTweet thisAlerts:
@APDauthorNov 11.2008 — hi, with some surfing, i compiled the following code,. but its still not wrking, can anyone see why?

1

2


3 <html>

4 <head>

5 <script type="text/javascript">

6 <!--

7 function KeepCount(ckbox) {

8


9 var total = 0;

10 var allowed = 2;

11 var max = form1.ckbox.length;

12

13 for (var idx = 0; idx < max; idx++) {

14 if (eval("document.playlist.ckbox[" + idx + "].checked") == true) {

15 total += 1;

16 }

17 }

18 if (total == (allowed + 1 ))

19 {

20 alert('Pick Just' + allowed + 'Please')

21 form1.ckbox; return false;

22 }

23


24 }

25


26 // -->

27 </script>

28 </head>

29


30 <body>

31 testing... <br>

32


33 <form id="form1">

34


35 <INPUT TYPE=CHECKBOX NAME="GrpDay" value="chk1" onClick="return KeepCount(this)"> 1 <br>

36 <INPUT TYPE=CHECKBOX NAME="GrpDay" value="chk2" onClick="return KeepCount(this)"> 2 <br>

37 <INPUT TYPE=CHECKBOX NAME="GrpDay" value="chk3" onClick="return KeepCount(this)"> 3 <br>

38


39 </form>

40


41 </body>

42 </html>
Copy linkTweet thisAlerts:
@FangNov 11.2008 — Incorrect referencing:

11 var max = [COLOR="Blue"]document.[/COLOR]form1.[COLOR="Red"]GrpDay[/COLOR].length;

14 if ([COLOR="Blue"]document.form1.elements['chk' + idx].checked[/COLOR]) {
Copy linkTweet thisAlerts:
@APDauthorNov 11.2008 — Fang,

I can't reference GrpDay, because I don't now the checkbox's name as I'm generating it within a ASP loop, thats why I'm passing 'this' to the function
Copy linkTweet thisAlerts:
@FangNov 12.2008 — &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;checkbox&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
window.onload=function() {
var f=document.getElementById('form1');
f.onsubmit=function() {return check();};
f.getElementsByTagName('div')[0].onclick=function() {check();};
};

function check() {
var allowed=2;
var aBox=document.getElementById('form1').getElementsByTagName('div')[0].getElementsByTagName('input');
for(var i=0, count=0; i&lt;aBox.length; i++) {
if(aBox[i].checked) {
count++;
}
}
if(count&gt;allowed) {
alert('Pick Just ' + allowed + ' please'); return false;
}
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
label {display:block;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form id="form1" action="process.php"&gt;
&lt;div&gt;
&lt;label&gt;&lt;input type="checkbox" name="GrpDay" value="chk1"&gt; 1&lt;/label&gt;
&lt;label&gt;&lt;input type="checkbox" name="GrpDay" value="chk2"&gt; 2&lt;/label&gt;
&lt;label&gt;&lt;input type="checkbox" name="GrpDay" value="chk3"&gt; 3&lt;/label&gt;
&lt;/div&gt;
&lt;div&gt;
&lt;button type="submit"&gt;submit&lt;/button&gt;
&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@APDauthorNov 12.2008 — thanks Fang, it worked
×

Success!

Help @APD spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...