Hide / Show when checkbox is checked or unchecked

Question

Hide / Show when checkbox is checked or unchecked

Navigation

#1 by (4 votes)
#2 by (1 votes)

2

How can I check if a checkbox field is checked, and according to its state, hide or show another input field, eg:

    <label>
    <input type="checkbox" name="check" /> Clique aqui
    </label>
    <input type="optional" name="op1" />

javascript jquery

asked by anonymous 08.12.2016 / 03:16

2 answers

1

I quickly made a code here, would it?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label><inputtype="checkbox" name="check"  id="check" value="true"/> Clique aqui
    </label>
    <input type="optional" name="op1" id="opcao" />
<script>
    
    $("#check").click(function(){
	
		if($(this).val()=="true"){
			$("#opcao").css("visibility","hidden");
			$(this).val("false");
			}
			else{
					$("#opcao").css("visibility","visible");
					$(this).val("true");
				}
			
		
		});
    </script>

08.12.2016 / 03:27

What is the difference of angle forEach and the map function of javascript Evaluation of conditional expressions in Java

score 4 · Accepted Answer

You can do this:

$('[name="check"]').change(function() {
  $('[name="op1"]').toggle(200);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label><inputtype="checkbox" name="check" /> Clique aqui
</label>
<input type="optional" name="op1" />

The script is monitoring the change event of the elements with the name="check" attribute. When it is changed, it executes the toggle event on the inputs with the name="op1" attribute.

The toggle works as follows: When a input is hidden it will be visible, when it is visible, it will be hidden.

NOTE: Parameter 200 is a time in milliseconds that you want the action to happen, to create an animation during the transition, you can modify or even remove this parameter, it is up to you.