jQuery如果复选框已选中，则添加值为true

Question

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> 

Answer 1

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

Answer 2

Try this :

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

Answer 3

  $('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.com/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> 

Answer 4

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.net/831mjzr1/