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 {

    }
});

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 {

    }
});

• javascript
• jquery

Share Improve this question Follow edited Jul 13, 2018 at 6:40 Daniel Hernandez asked Jul 13, 2018 at 6:20 Daniel HernandezDaniel Hernandez 19577 silver badges1818 bronze badges 2

• 1 if you clear the value, how you can show it again? – Aravind S Commented Jul 13, 2018 at 6:21
• Remove $('.test').val('') from your code – Ankit Agarwal Commented Jul 13, 2018 at 6:23

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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'));
});
    }
});

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./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>

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');
    }
});

$('#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)

    }
});

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";
  }
}

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/aaTq3/