ограничение выбора checkbox

[kirosin]

Нужно сделать так, чтобы нельзя было одновременно выбрать более трех вариантов в блоке "a" и более двух вариантов в блоке "b".

<form action="" method="post">
<table>
<th>Блок "a"</th><th>Блок "b"</th>
<tr>
<td><input type="checkbox" name="action[]" onclick="checker('a1');" id="a1" value="1" /></td>
<td><input type="checkbox" name="action[]" onclick="checker('b1');" id="b1" value="5" /></td>
</tr>
<tr>
<td><input type="checkbox" name="action[]" onclick="checker('a2');" id="a2" value="2" /></td>
<td><input type="checkbox" name="action[]" onclick="checker('b2');" id="b2" value="6" /></td>
</tr>
<tr>
<td><input type="checkbox" name="action[]" onclick="checker('a3');" id="a3" value="3" /></td>
<td><input type="checkbox" name="action[]" onclick="checker('b3');" id="b3" value="7" /></td>
</tr>
<tr>
<td><input type="checkbox" name="action[]" onclick="checker('a4');" id="a4" value="4" /></td>
<td><input type="checkbox" name="action[]" onclick="checker('b4');" id="b4" value="8" /></td>
</tr>
<tr><td colspan="2"><input type="submit" value="Ok"></td></tr>
</table>
</form>

[Никки]

в обработчике события onclick перебирайте все элементы checkbox и считайте сколько отмечено, если меньше 3 (2), то возвращайте true, иначе false.

[kirosin]

проблема в том, что я в яваскрипте чайник и как перебирать и считать элементы даже не представляю.

[WhiteSpirit]

Можно вот так

<script language="javascript">
	gCheckedA = 0
	gCheckedB = 0
	function checker(o) {
		var colName = o.id.substring(0, 1)
		var ch = (o.checked) ? 1 : -1
		if (colName == 'a') gCheckedA += ch
		else gCheckedB += ch
		if ((gCheckedA > 1 && colName == 'a') || (gCheckedB > 0 && colName == 'b'))
		for (var i = 0; i < 4; i ++) {
			var oo = document.getElementById(colName + (i + 1))
			if (!oo.checked) oo.disabled = ((colName == 'a' && gCheckedA > 2) || (colName == 'b' && gCheckedB > 1))
			}
		}
	</script>

Только во всех checkbox'ах надо написать onclick="checker(this)"

[Никки]

Вот вариант с использованием JQuery:

<script src="jquery-1.4.4.min.js"></script>
<script>
function Check()
{
	var a = 0;
	var b = 0;
	$("#form1 input").each(function(){
		if ($(this).attr("checked"))
			if ($(this).attr("group") == "a") a++; else b++;
	});
	if (b > 2 || a > 3) return false; else return true;
}
</script>

<form id="form1">
<input type="checkbox" name="action[]" group="a" onclick="return Check()">Галочка А<br/>
<input type="checkbox" name="action[]" group="b" onclick="return Check()">Галочка B<br/>
<input type="checkbox" name="action[]" group="a" onclick="return Check()">Галочка А<br/>
<input type="checkbox" name="action[]" group="a" onclick="return Check()">Галочка А<br/>
<input type="checkbox" name="action[]" group="b" onclick="return Check()">Галочка B<br/>
<input type="checkbox" name="action[]" group="b" onclick="return Check()">Галочка B<br/>
<input type="checkbox" name="action[]" group="b" onclick="return Check()">Галочка B<br/>
<input type="checkbox" name="action[]" group="b" onclick="return Check()">Галочка B<br/>
<input type="checkbox" name="action[]" group="b" onclick="return Check()">Галочка B<br/>
<input type="checkbox" name="action[]" group="a" onclick="return Check()">Галочка А<br/>
<input type="checkbox" name="action[]" group="a" onclick="return Check()">Галочка А<br/>
<input type="checkbox" name="action[]" group="a" onclick="return Check()">Галочка А<br/>
<input type="checkbox" name="action[]" group="a" onclick="return Check()">Галочка А
</form>

Добавил в input атрибут group чтобы определять в каком блоке галочка - в А или в Б

[kirosin]

спасибо за помощь, все замечательно "входит и выходит" :)