jQuery hide and show input value

Question

What I'm looking for is when the box is unchecked don't show any values in the inputs and when the box is checked then show every single input with its respective value.

This is my code:

$('#checkbox').change(function() { 
    if($('#checkbox').is(':checked')) {
        $('.test').val('')
    } else {

    }
});

if you clear the value, how you can show it again?

Aravind S
– Aravind S

2018-07-13 06:21:24 +00:00
Commented Jul 13, 2018 at 6:21 — Aravind S
– Aravind S, Commented Jul 13, 2018 at 6:21
Remove $('.test').val('') from your code

Ankit Agarwal
– Ankit Agarwal

2018-07-13 06:23:42 +00:00
Commented Jul 13, 2018 at 6:23 — Ankit Agarwal
– Ankit Agarwal, Commented Jul 13, 2018 at 6:23

Ahmad · Accepted Answer · 2018-07-13 07:10:53Z

4

one way of doing it is by declaring a variable.

var inputValue;
$('#checkbox').change(function(){ 
    if ($('#checkbox').is(':checked')){
        inputValue = $('.test').val();
        $('.test').val('');
    } else {
        $('.test').val(inputValue);
    }
});

For multiple input fields. The idea of @Rashid is awesome. Store the value in the data-value attribute. And when the checkbox is unchecked you can get the values using data-value attribute.

$('#checkbox').change(function() { 
    if($('#checkbox').is(':checked')) {
    $.each($('.test'),function(){
      $(this).attr('data-value',$(this).val()).val("");
    });

    } else {
$.each($('.test'),function(){
      $(this).val($(this).attr('data-value'));
});
    }
});

edited Jul 13, 2018 at 7:10

answered Jul 13, 2018 at 6:24

Ahmad

8877 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Daniel Hernandez Over a year ago

Your code is working, but what can I do for multiple inputs?

Ahmad Over a year ago

By multiple inputs what you mean? Do you want to hide the value of all the input fields when the checkbox is checked or every field will have separate checkbox?

Daniel Hernandez Over a year ago

What I'm looking for is when the box is unchecked don't show any value and when the box is checked show the values on their respective inputs

Ahmad Over a year ago

For that purpose you will need to give every input field unique id. Then store values in key value pairs in a variable. The id of input field will be key. On unchecking you can then assign the values to each input field by using the key stored in variable.

Ahmad Over a year ago

I can't say its the simplest way or not. I can just say its one way of doing it. You should try to do it. Think of some other way of doing it. If you find it not working you can always refer back to stackoverflow for help. Happy coding!

|

Rashid · Accepted Answer · 2018-07-13 06:53:00Z

You can try this:

$(document).ready(function(){
	$('input[type="checkbox"]').click(function(){ 
    var $this = $(this);
		var $item = $this.attr('name');
		var $input = $('input[name="'+$item+'"][type="text"]');
    var $inputValue = $input.val();
		
		if ($this.is(':checked')){
			$input.data('oldvalue',$inputValue);
			$input.val('');
		} else {
			$input.val($input.data('oldvalue'));
		}
	});
});

	body{line-height: 1.5;}
	input{display: block;margin: 10px 0 0;}
	input[type="checkbox"] { display: inline;}
	label{ margin: 0 10px 0 5px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options">
		<input type="checkbox" name="title"><label>Title</label>
		<input type="checkbox" name="author"><label>Author</label>
		<input type="checkbox" name="category"><label>Category</label>
	</div>
	<div class="container">
		<form method="post">
			<input type="text" name="title" placeholder="Title:">
			<input type="text" name="author" placeholder="Author:">
			<input type="text" name="category" placeholder="Category:">
			<input type="submit" value="Submit">
		</form>
</div>

david · Accepted Answer · 2018-07-13 06:24:48Z

0

In your code, you remove the value when #checkbox is checked. That's not how you hide the element. Just use css display to hide/show the element.

$('#checkbox').change(function() { 
    if ($('#checkbox').is(':checked')) {
        $('.test').css('display', 'none');
    } else {
        $('.test').css('display', 'block');
    }
});

answered Jul 13, 2018 at 6:24

david

3,2289 gold badges33 silver badges43 bronze badges

1 Comment

Daniel Hernandez Over a year ago

Your code is only hiding the input and showing it again.

xujizhong · Accepted Answer · 2018-07-13 06:30:49Z

0

$('#checkbox').change(function() { 
    if($('#checkbox').is(':checked')) {

        var value = $('.test').val()
        $('.test').data('value',value).val('')

    } else {

        var value = $('.test').data('value')
        $('.test').val(value)

    }
});

answered Jul 13, 2018 at 6:30

xujizhong

423 bronze badges

Comments

sandip bharadva · Accepted Answer · 2018-07-13 06:31:54Z

0

try this

<input type="checkbox" id="myCheck"  onclick="myFunction()">

function myFunction() {
  // Get the checkbox
  var checkBox = document.getElementById("myCheck");
  // Get the output text
  var text = document.getElementById("text");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

answered Jul 13, 2018 at 6:31

sandip bharadva

6341 gold badge6 silver badges21 bronze badges

Comments

Nageen · Accepted Answer · 2018-07-13 06:37:09Z

0

I think you should use toggle() jquery function.

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        var item = $(this).attr('name');
        $('input[name="'+item+'"][type="text"]').toggle();
    });
});

also check at fiddle :- http://jsfiddle.net/aaTq3/

answered Jul 13, 2018 at 6:37

Nageen

1,7013 gold badges25 silver badges30 bronze badges

1 Comment

Ahmad Over a year ago

The OP doesn't want to hide the input fields. Instead he wants to empty the values of inputs when checkbox is checked.

Collectives™ on Stack Overflow

jQuery hide and show input value

6 Answers 6

7 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related