using JavasSript to check checkboxes in PHP form - php

Question

Hi I am trying to add some function which only allows the user to select up to 4 checkboxes at a time, but failing miserably... php and javascript don't seem to be working together very well!
my PHP code is:
<?php
echo "<form method='post' name='time' action='timeinsert.php'>";
echo "<td><input type='checkbox' `name='$displayTime2'onclick='KeepCount()'></td>";
echo "</form>";
?>
my Javascript code is:
<script language="JavaScript">
<!--`
function KeepCount() {
var NewCount = 0
if (document.time.<?php"$displayTime2"?>.checked)
{NewCount = NewCount + 1}
f (NewCount == 4)
{
alert("Pick maximum of 4 time slot's Please")
document.time; return false;`
}
//-->
</script>

Answer 1

Using jQuery:
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'>
</script>
<script type='text/javascript'>
$(function() {
$('input[type=checkbox]').click(function () {
var count = $('input[type=checkbox]:checked').length;
if (count > 4) alert('Pick maximum of 4 time slots please!');
});
});
</script>
<?php
echo "<form method='post' name='time' action='timeinsert.php'>";
echo "<td><input type='checkbox' name='$displayTime2'></td>";
echo "</form>";
?>
UPDATE: To prevent further checks from happening after 4 clicks, you can do this:
<script type='text/javascript'>
$(function() {
$('input[type=checkbox]').click(function () {
var count = $('input[type=checkbox]:checked').length;
if (count > 4) {
$(this).removeAttr('checked');
alert('Pick maximum of 4 time slots please!');
}
});
});
</script>

Answer 2

<script language="JavaScript">
var NewCount = 0;
function KeepCount()
{
if(NewCount <= 4)
{
if (document.time.<?php echo $displayTime2; ?>.checked)
{
NewCount = parseInt(NewCount)+1;
}
}
else
{
alert("Pick maximum of 4 time slot's Please");
return false;
}
}
</script>

Answer 3

Okay I have now edited Stefan's code and come up with:
<script type='text/javascript' src='includes/jquery-1.9.1.min.js'>
</script>
<script type='text/javascript'>
$(function() {
$('input[type=checkbox]').click(function () {
var count = $('input[type=checkbox]:checked').length;
if (count > 4) alert('Pick maximum of 4 time slots please!');
if (count > 4) $(this).removeAttr("checked");
});
});
</script>
this alerts the user and removes and ticks after 4 checkboxes have already been selected. Is it possible to add
$(this).removeAttr("checked");
to the first if statement rather than adding another line of code?