views:

72

answers:

5

Hello,

I have been trying to do this all day. At the end i managed to get it working. I know it is not the best way to do.

Can someone please show me a better way. I need 12 altogether. It does not need to be check box either. It can be just a text. I got the idea from com/2006/12/14/using-jquery-to-show-hide-form-elements-based-on-a-checkbox-selection/

Thanks all.

I managed to upload it on http://utilitybase.com/paste/wmq

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
    $(document).ready(function(){

        //Hide div w/id extra
       $("#extra").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme").click(function(){

        // If checked
        if ($("#checkme").is(":checked"))
        {
            //show the hidden div
            $("#extra").show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $("#extra").hide("fast");
        }
      });

    });
</script>

<script type="text/javascript">
    $(document).ready(function(){

        //Hide div w/id extra
       $("#extra1").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme1").click(function(){

        // If checked
        if ($("#checkme1").is(":checked"))
        {
            //show the hidden div
            $("#extra1").show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $("#extra1").hide("fast");
        }
      });

    });
</script>

<script type="text/javascript">
    $(document).ready(function(){

        //Hide div w/id extra
       $("#extra2").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme2").click(function(){

        // If checked
        if ($("#checkme2").is(":checked"))
        {
            //show the hidden div
            $("#extra2").show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $("#extra2").hide("fast");
        }
      });

    });
</script>

<script type="text/javascript">
    $(document).ready(function(){

        //Hide div w/id extra
       $("#extra3").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme3").click(function(){

        // If checked
        if ($("#checkme3").is(":checked"))
        {
            //show the hidden div
            $("#extra3").show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $("#extra3").hide("fast");
        }
      });

    });
</script>

<script type="text/javascript">
    $(document).ready(function(){

        //Hide div w/id extra
       $("#extra4").css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme4").click(function(){

        // If checked
        if ($("#checkme4").is(":checked"))
        {
            //show the hidden div
            $("#extra4").show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $("#extra4").hide("fast");
        }
      });

    });
</script>
</head>

<body>

<div style="width: 800px;">
        <form>

            <input type="text" name="" maxlength="30" />
            <label for="checkbox"> Check to enter another email address:</label>
            <input id="checkme" type="checkbox" />

            <div id="extra">
            <input type="text" name="input" maxlength="30" />
            <label for="checkbox"> Check to enter another email address:</label>
            <input id="checkme1" type="checkbox" />

            <div id="extra1">
            <input type="text" name="" maxlength="30" />
            <label for="checkbox"> Check to enter another email address:</label>
            <input id="checkme2" type="checkbox" />

            <div id="extra2">
            <input type="text" name="" maxlength="30" />
            <label for="checkbox"> Check to enter another email address:</label>
            <input id="checkme3" type="checkbox" />

            <div id="extra3">
            <input type="text" name="" maxlength="30" />
            <label for="checkbox"> Check to enter another email address:</label>
            <input id="checkme4" type="checkbox" /> 

            <div id="extra4">
            <input type="text" name="" maxlength="30" />
             </div>
           </div>
          </div>
         </div>
       </div>
  </form>
</div>
</body>
</html>

A: 

thats nice .

Did you try .each or .live

http://api.jquery.com/each/

http://api.jquery.com/live/

zod
i am trying to paste the code here but it does not work
baris22
paste code ... select and use 1010 in that editor
zod
i am new here....
baris22
Or select it and hit 'ctrl + K'.
David Thomas
A: 

Hmm. Looking at your code on UtilityBase. Maybe try using the .siblings() jquery function. Then for the click of the checkbox you can do a $(this).siblings('div').hide()/show();

Aaron Hathaway
A: 

This usually works for me

$("div[id^='extra']").click(function(){
  $div = $(this);
  divID = $div.attr("id").substring(5);

//Hide div w/id extra
       $div.css("display","none");

        // Add onclick handler to checkbox w/id checkme
       $("#checkme"+divID).click(function(){

        // If checked
        if ($("#checkme"+divID).is(":checked"))
        {
            //show the hidden div
            $div.show("fast");
        }
        else
        {      
            //otherwise, hide it 
            $div.hide("fast");
        }

});

This should keep you from having to write the same thing multiple timesdiv

sassinak
i could not get this working.
baris22
A: 

You could try something like this:

// isolate the first div. You can surely find a better way,
// using classes, containers, etc., but this works for now. 
// Hide all the others.
$('div:has(input):not(:first)').hide();

// For each checkbox, open the next div
$('input:checkbox').click( function(){
  if( $(this).is(':checked') ) {
    $(this).next('div').show('fast');
  } else {
    $(this).next('div').hide('fast');
  }
});
Ken Redler
A: 

If I got you right, you might play around with

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(document).ready(function(){
      var prototype = $('.prototype').clone();

      $('.prototype > input[type="checkbox"]').live('click', function() {
        if($(this).is(':checked')) {
          var clone = prototype.clone();
          clone.find('input[type="checkbox"]').attr('checked', false);
          $(this).parent('.prototype').append(clone);
        } else {
          $(this).parent('.prototype').find('.prototype:last').remove();
        }
      });
    });
  </script>
</head>

<body>
  <form>
    <div class="prototype">
      <input type="text" name="" maxlength="30" />
      <label for="checkbox"> Check to enter another email address:</label>
      <input id="checkme" type="checkbox" />
    </div>
  </form>
</body>
</html>

EDIT: This add's a new input/label/checkbox prototype inside the current one or removes it's children on the other hand. You could add ids to the fields as well.

pex
it works nearly perfect. if you click 4-5 times and try to unclick it and click it again it does not close 1 by one. it closes 3-4 of them and if you click the top one it opens 1 at the end.
baris22
i'll have a look at it
pex