How to make jquery click function if checkBox checked then status value set to 'true', if not cheked value set to 'false'?

if I check checkbox 1 , then status 1 set to true if I check checkbox 2 , then status 2 set to true if I check checkbox 3 , then status 3 set to true

<div class="form-group">    
  <label><input name="checkBox[]" type="checkbox" value="1"> Checkbox 1</label>
   <input name="status[]" type="text" value="">
</div>
<div class="form-group">    
   <label><input name="checkBox[]" type="checkbox" value="2"> Checkbox 2</label>
   <input name="status[]" type="text" value="">
</div>
<div class="form-group">    
  <label><input name="checkBox[]" type="checkbox" value="3"> Checkbox 3</label>
   <input name="status[]" type="text" value="">
</div>

How to make jquery click function if checkBox checked then status value set to 'true', if not cheked value set to 'false'?

if I check checkbox 1 , then status 1 set to true if I check checkbox 2 , then status 2 set to true if I check checkbox 3 , then status 3 set to true

<div class="form-group">    
  <label><input name="checkBox[]" type="checkbox" value="1"> Checkbox 1</label>
   <input name="status[]" type="text" value="">
</div>
<div class="form-group">    
   <label><input name="checkBox[]" type="checkbox" value="2"> Checkbox 2</label>
   <input name="status[]" type="text" value="">
</div>
<div class="form-group">    
  <label><input name="checkBox[]" type="checkbox" value="3"> Checkbox 3</label>
   <input name="status[]" type="text" value="">
</div>

• javascript
• jquery

• 3 your question is not very clear can you clarify. also include the JS in OP – guradio Commented Mar 30, 2017 at 7:22
• Just bind a change event with checkboxes – Satpal Commented Mar 30, 2017 at 7:23

4 Answers 4

As your input is within <lable>, use parent().next() to set the value.

Here is the working example.

$(function() {
  $('.form-group input[type="checkbox"]').change(function() {
    if ($(this).is(":checked")) {
      $(this).parent().next().val('true')
    } else
      $(this).parent().next().val('false');
  });
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label><input name="checkBox[]" type="checkbox" value="1"> Checkbox 1</label>
  <input name="status[]" type="text" value="">
</div>
<div class="form-group">
  <label><input name="checkBox[]" type="checkbox" value="2"> Checkbox 2</label>
  <input name="status[]" type="text" value="">
</div>
<div class="form-group">
  <label><input name="checkBox[]" type="checkbox" value="3"> Checkbox 3</label>
  <input name="status[]" type="text" value="">
</div>

Try this :

$('input[type="checkbox"]').change(function() { 
    if($(this).prop('checked')){
       $(this).parent().next().val("true");
    }else{
       $(this).parent().next().val("false");
    }
});

 $('input[type="checkbox"]').change(function () {
            if ($(this).prop('checked')) {  $(this).closest('label').next('input[type="text"]').val('true');
            } else {
                $(this).closest('label').next('input[type="text"]').val('false');
            }
        });

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="form-group">    
  <label><input name="checkBox[]" type="checkbox" value="1"> Checkbox 1</label>
   <input name="status[]" type="text" value="">
</div>
<div class="form-group">    
   <label><input name="checkBox[]" type="checkbox" value="2"> Checkbox 2</label>
   <input name="status[]" type="text" value="">
</div>
<div class="form-group">    
  <label><input name="checkBox[]" type="checkbox" value="3"> Checkbox 3</label>
   <input name="status[]" type="text" value="">
</div>

You can try this

<div class="form-group">    
   <input name="checkBox" type="checkbox" value="1">
   <input name="status" type="text" value="">
</div>
<div class="form-group">    
   <input name="checkBox" type="checkbox" value="2">
   <input name="status" type="text" value="">
</div>
<div class="form-group">    
   <input name="checkBox" type="checkbox" value="3">
   <input name="status" type="text" value="">
</div>

and the jquery script

$('input[type="checkbox"]').change(function() { 
    if ($(this).is(':checked')) {
        $(this).next('input[type="text"]').val('true');
    } else {
        $(this).next('input[type="text"]').val('false');
    }
}).change();

https://jsfiddle/831mjzr1/