Select boxes/radiobuttoms hybrid

tardebut · December 3rd, 2011, 12:44 AM

Hi all,

I want to create a group of select boxes where just 1 of them can be selected at any time (just as radiobuttoms) but that the possibility to select none of them is kept.

In the following example there are three rows with a pair of select boxes each. I want each pair to behave as described above: if 0 is selecetd 3 can't, and both 0 and 3 can be deselected at will.

Code:

<html>
<head>

<script>
function reCheck(){
var k = this.name;
if(k<3){document.forms["myform"][k+3].checked = false;}
    else{document.forms["myform"][k-3].checked = false;}
}
</script>

</head>
<body>
<form name = "myform" action="dothis.php" method="post">
<table  id="MyTable">
<?php
for($i=0;$i<=2;$i++)
{
$j = $i + 3;
echo "<tr>";
echo "<td>";
echo "<input type=\"checkbox\" name=\"".$i."\" onclick = \"reCheck()\" />".$i;
echo "</td>";
echo "<td>";
echo "<input type=\"checkbox\" name=\"".$j."\" onclick = \"reCheck()\" />".$j;
echo "</td>";
echo "</tr>";
}
?>
</table>
</form>
</body>
</html>

By the way, the box 4 can't be checked.

Can you help me with this?

Thanks in advance,

Omar

December 3rd, 2011, 02:50 AM

Well I think your javascript is not correct. And your question is not clear to me cuz i would have help you to solve the problem.

Imar · December 3rd, 2011, 06:48 AM

Maybe this solution using jQuery puts you on the right track?

http://imar.spaanjaars.com/562/creat...ns-with-jquery

Cheers,

Imar

tardebut · December 3rd, 2011, 08:10 AM

Thank you very much Stiward and Imar. First of all you may have realized that I'm a total beginner and any help is welcome.

@Imar: I visited your page before posting here. Your solution is very nice and it worked perfect for me until I sorted the table. This table is sortable and hiddable, implemented according to (http://www.tablefixedheader.com/). Why when the table is sorted the functionality is lost (IE 8)?

@Stiward: Sorry if I wasn't clear before, I will try to be clearer now. For two select boxes I want these properties:
- The two can't be checked at the same time (like radiobuttons).
- They can be unchecked (not like radiobuttons).
I'm not surprised my code is wrong.

Thanks to both of you. I look forward.

Regards,

Omar

tardebut · December 3rd, 2011, 09:44 AM

Hi all,

I have passed the name of the checkbox as an argument to the javascript function and the checkboxes became responsive at least, but the pattern of activation is not the expected. Don't get what it is going on here. There are some alert messages to track if the detection of the checkbox by the javascript is correct, and it is but from there on the problematic behaviour begins. Here you have,

Code:

<html>
<head>

<script>
function reCheck(k){
if(k<3){
	alert(k+3+''+document.forms["myform"][k+3].checked)

	document.forms["myform"][k+3].checked = false;

	alert(k+3+''+document.forms["myform"][k+3].checked)
		}
    else{	
	alert(k-3+''+document.forms["myform"][k-3].checked)

	document.forms["myform"][k-3].checked = false;

	alert(k-3+''+document.forms["myform"][k-3].checked)
		}
	}

</script>

</head>
<body>
<form name = "myform" action="dothis.php" method="post">
<table  id="MyTable">
<?php
for($i=0;$i<=2;$i++)
{
$j = $i + 3;
echo "<tr>";
echo "<td>";
echo "<input type=\"checkbox\" name=\"".$i."\" onclick = \"reCheck(".$i.")\" />".$i;
echo "</td>";
echo "<td>";
echo "<input type=\"checkbox\" name=\"".$j."\" onclick = \"reCheck(".$j.")\" />".$j;
echo "</td>";
echo "</tr>";
}
?>
</table>
</form>
</body>
</html>

Looking forward,

Omar