checkbox om groep radiobuttons zichtbaar te maken

bramdejong · 19 mei 2009

Ik heb nu onderstaande code:
Ik wil dus dat een groepje radiobuttons zichtbaar wordt zodra ik een checkbox aanvink
Ik heb het nu/hier geprobeerd met een stukje css en een kort scriptje maar het werkt niet

Is er iemand die me hiermee kan helpen??

Bvd

------------MYCODE----------------

</script>

<script language="javascript" type="text/javascript">

if(eval('f.vraag1_aan').checked){
document.getElementByName()("vraag1").style.display="block";
}
</script>

<style>

.group0 {
display: none;
}

</style>

</head>
<body>

<form>

<table width="700">

<tr>
<td colspan="5"> </td>
</tr>
<tr>
<td width="380"> </td>
<td width="80" align="center" valign="bottom">Ja!<br></td>
<td width="80" align="center" valign="bottom">Mits het binnen mijn budget past</td>
<td width="80" align="center" valign="bottom">Dat lijkt me wel leuk</td>
<td width="80" align="center" valign="bottom">Nee</td>
</tr>

<tr>
<td><strong>'Ik wil mijn producten online verkopen'</strong></td>
<td align="center" valign="bottom"><input type="checkbox" name="vraag1_aan" id="vraag1_aan"></td>
<td align="center" valign="bottom"> </td>
<td align="center" valign="bottom"> </td>
<td align="center" valign="bottom"> </td>
</tr>
<tr>
<td> </td>
<td align="center" valign="bottom" class="group0">
<span class="group0" name="vraag1">
<input type="radio" value="12" />
</span></td>
<td align="center" valign="bottom" class="group0">
<span class="group0" name="vraag1">
<input type="radio" value="12" />
</span></td>
<td align="center" valign="bottom" class="group0">
<span class="group0" name="vraag1">
<input type="radio" value="12" />
</span></td>
<td align="center" valign="bottom" class="group0">
<span class="group0" name="vraag1">
<input type="radio" value="4" />
</span></td>
</tr>

That Guy · 19 mei 2009

op het moment wordt er alleen gechecked of ie gechecked is (lol) als de window laad. Niet als je klikt. Also, je code is een beetje... scrambled. En werkt niet. Also, de 'evil' eval kan gewoon weg.

Je zult een event moeten toevoegen:

PHP:

//js
function checkBox(elem,toggleWhat)
{
   if(elem.checked == true){
      document.getElementById(toggleWhat).display = "block";
   }else{
      document.getElementById(toggleWhat).display = "none";
   }
}

HTML:

<input type="checkbox" onclick="checkBox(this,'BBQ');">

<div id='BBQ'>
   deze content wordt zo getoggled
</div>

oid.

bramdejong · 20 mei 2009

Help?!

Ik heb (waarschijnlijk verkeerd) gedaan wat je me liet zien...
Het werkt dus niet... Wat doe ik fout!?

HTML:

<html>
<head>

<script language="javascript" type="text/javascript">
<!--
function score(f) {

/* hier aantal vragen invullen !!! */
numQuestions = 4

totals=new Array(0,0,0,0); bedrag = new Array(0,0,0,0);
for (i=0;i<numQuestions;i++){
for (j=0;j<4;j++){
		if(eval('f.group'+i+'['+j+']').checked){
		bedrag[j] = parseInt(bedrag[j]) + parseInt(eval('f.group'+i+'['+j+']').value);		totals[j]++;
		}
	}
}

f.never.value=bedrag[0];
f.seldom.value=bedrag[1];
f.often.value=bedrag[2];
f.always.value=bedrag[3];
}
//-->
</script>

<script language="javascript" type="text/javascript">

function checkBox(elem,toggleWhat)
{
   if(elem.checked == true){
      document.getElementById(toggleWhat).display = "block";
   }else{
      document.getElementById(toggleWhat).display = "none";
   }
}

</script>



<style>

.group0 {
display: none;
}

</style>

</head>

<body>

<form>

<table width="700">

<tr>
<td colspan="5">&nbsp;</td>
</tr>
<tr>
  <td width="380">&nbsp;</td>
<td width="80" align="center" valign="bottom">Ja!<br></td>
<td width="80" align="center" valign="bottom">Mits het binnen mijn budget past</td>
<td width="80" align="center" valign="bottom">Dat lijkt me wel leuk</td>
<td width="80" align="center" valign="bottom">Nee</td>
</tr>

<tr>
  <td><strong>'Ik wil mijn producten online verkopen'</strong></td>
  <td align="center" valign="bottom"><input type="checkbox" onclick="checkBox(this,'vraag_1');"></td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td align="center" valign="bottom" class="group0">
    <div id='vraag_1'>
	<span class="group0" name="vraag1">
    <input type="radio" value="12" />
    </span></div></td>
  <td align="center" valign="bottom" class="group0">
  	<div id='vraag_1'>
    <span class="group0" name="vraag1">
    <input type="radio" value="12" />
    </span></div></td>
  <td align="center" valign="bottom" class="group0">
  	<div id='vraag_1'>
    <span class="group0" name="vraag1">
    <input type="radio" value="12" />
    </span></div></td>
  <td align="center" valign="bottom" class="group0">
  	<div id='vraag_1'>
    <span class="group0" name="vraag1">
    <input type="radio" value="4" />
    </span></div></td>
</tr>

That Guy · 20 mei 2009

na ff klooien heb ik het gevoden: de code die ik gaf was iets te snel getyped, niet getest. Close, though:

PHP:

//javascript
function checkBox(elem,toggleWhat)
{

   if(elem.checked == true){
      document.getElementById(toggleWhat).style.display = "block";
   }else{
      document.getElementById(toggleWhat).style.display = "none";
   }
}

het is 'style.display', niet 'display'

ErikBooy007 · 20 mei 2009

Maar je kunt ook niet vier keer dezelfde id hebben.

bramdejong · 20 mei 2009

Opgelost

Ik heb het al op een andere manier opgelost....

Hieronder de complete code...

HTML:

<html>
<head>

<script language="javascript" type="text/javascript">
<!--
function score(f) {

/* hier aantal vragen invullen !!! */
numQuestions = 4

totals=new Array(0,0,0,0); bedrag = new Array(0,0,0,0);
for (i=0;i<numQuestions;i++){
for (j=0;j<4;j++){
		if(eval('f.group'+i+'['+j+']').checked){
		bedrag[j] = parseInt(bedrag[j]) + parseInt(eval('f.group'+i+'['+j+']').value);		totals[j]++;
		}
	}
}

f.never.value=bedrag[0];
f.seldom.value=bedrag[1];
f.often.value=bedrag[2];
f.always.value=bedrag[3];
}
//-->
</script>

<script type="text/javascript"> 
	<!-- 
	function showMe (it, box) { 
	  var vis = (box.checked) ? "block" : "none"; 
	  document.getElementById(it).style.display = vis;
	} 
	//--> 
</script>

</head>

<body>

<form>

<table width="700">

<tr>
<td colspan="6">&nbsp;</td>
</tr>
<tr>
  <td colspan="2">&nbsp;</td>
<td width="79" align="center" valign="bottom">Ja!<br></td>
<td width="79" align="center" valign="bottom">Mits het binnen mijn budget past</td>
<td width="79" align="center" valign="bottom">Dat lijkt me wel leuk</td>
<td width="95" align="center" valign="bottom">Nee</td>
</tr>

<tr>

  <td width="296"><strong>'Ik wil mijn producten online verkopen'
     
  </strong></td>
  <td width="44"><strong>Ja
      <input type="checkbox" name="modtype"  value="value1" onClick="showMe('div1', this)" />
  </strong></td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
</tr>

<tr>
  <td colspan="2">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
</tr>
<tr>
  <td colspan="2">
  <tr>

  <td colspan="2" valign="bottom">&nbsp;</td>
  <td colspan="4" align="center" valign="middle"><br>
	<div class="row" id="div1" style="display:none">
	<table width="320" border="0" cellspacing="0" cellpadding="0" valign="middle">
      <tr>
        <td colspan="4" align="left" valign="middle"> Ik wil een beschrijving per product laten zien </td>
        </tr>
      <tr>

        <td align="center" valign="middle"><input type="radio" name="group0" value="12" /></td>
        <td align="center"><input type="radio" name="group0" value="12" /></td>
        <td align="center"><input type="radio" name="group0" value="12" /></td>
        <td align="center"><input type="radio" name="group0" value="4" /></td>
        </tr>
      <tr>
        <td colspan="4" align="left" valign="middle"> Ik wil een beschrijving per product laten zien </td>
        </tr>

      <tr>
        <td align="center" valign="middle"><input type="radio" name="group1" value="12" /></td>
        <td align="center"><input type="radio" name="group1" value="12" /></td>
        <td align="center"><input type="radio" name="group1" value="12" /></td>
        <td align="center"><input type="radio" name="group1" value="4" /></td>
        </tr>
      <tr>
        <td colspan="4" align="left" valign="middle"> Ik wil een beschrijving per product laten zien </td>

        </tr>
      <tr>
        <td align="center" valign="middle"><input type="radio" name="group2" value="12" /></td>
        <td align="center"><input type="radio" name="group2" value="12" /></td>
        <td align="center"><input type="radio" name="group2" value="12" /></td>
        <td align="center"><input type="radio" name="group2" value="4" /></td>
        </tr>
 	</table>
  	</div>

</td>
  </tr>

<tr>
  <td colspan="6">&nbsp;</td>
</tr>
<tr>
  <td colspan="2">&nbsp;</td>
  <td width="79" align="center" valign="bottom">Ja!<br></td>
  <td width="79" align="center" valign="bottom">Mits het binnen mijn budget past</td>

  <td width="79" align="center" valign="bottom">Dat lijkt me wel leuk</td>
  <td width="95" align="center" valign="bottom">Nee</td>
</tr>

<tr>
  <td colspan="2"><strong>'Ik wil mijn producten online verkopen'</strong></td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>

  <td align="center" valign="bottom">&nbsp;</td>
</tr>
<tr>
  <td colspan="2">&nbsp;</td>
  <td align="center" valign="bottom"><input name="group3" type="radio" value="12" /></td>
  <td align="center" valign="bottom"><input name="group3" type="radio" value="12" /></td>
  <td align="center" valign="bottom"><input name="group3" type="radio" value="12" /></td>
  <td align="center" valign="bottom"><input name="group3" type="radio" value="12" /></td>
</tr>
<tr>
  <td colspan="2">&nbsp;</td>

  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
</tr>
<tr>
  <td colspan="2">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>
  <td align="center" valign="bottom">&nbsp;</td>

  <td align="center" valign="bottom">&nbsp;</td>
</tr>
<tr>
  <td colspan="2">&nbsp;</td>
<td width="79" align="center" valign="bottom">&nbsp;</td>
<td width="79" align="center" valign="bottom">&nbsp;</td>
<td width="79" align="center" valign="bottom">&nbsp;</td>
<td width="95" align="center" valign="bottom">&nbsp;</td>
</tr>

</table>

<p><br />
  <br />

  
  <input type="button" onClick="score(this.form)" value="calculate" />
  </p>
<table width="700">
  <tr>
    <td width="380">&nbsp;</td>
    <td width="80" td align="center" valign="bottom">Ja!<br></td>
    <td width="80" td align="center" valign="bottom">Mits het binnen mijn budget past</td>
    <td width="80" td align="center" valign="bottom">Dat lijkt me wel leuk</td>

    <td width="80" td align="center" valign="bottom">Nee</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td td align="center" valign="bottom">&nbsp;</td>
    <td td align="center" valign="bottom">&nbsp;</td>
    <td td align="center" valign="bottom">&nbsp;</td>
    <td td align="center" valign="bottom">&nbsp;</td>

  </tr>
  <tr>
    <td width="380">&nbsp;</td>
    <td width="80" td align="center" valign="bottom">&euro;
      <input name="never" value="" size="4" /></td>
    <td width="80" td align="center" valign="bottom">&euro;
      <input name="seldom" value="" size="4" /></td>
    <td width="80" td align="center" valign="bottom">&euro;
      <input name="often" value="" size="4" /></td>

    <td width="80" td align="center" valign="bottom"><input name="always" value="" size="4" /></td>
  </tr>
</table>
<p><br />
</p>
</form>

</body>
</html>

That Guy · 20 mei 2009

uhm, mooi zo, maar je weet dat je nieuwe showMe functie precies hetzelfde doet als de checkBox functie die ik gaf?

checkbox om groep radiobuttons zichtbaar te maken

bramdejong

Gebruiker

That Guy

Meubilair

bramdejong

Gebruiker

That Guy

Meubilair

ErikBooy007

Terugkerende gebruiker

bramdejong

Gebruiker

That Guy

Meubilair

Nieuwste berichten

Wij waarderen jouw privacy