CODEWITHSUNDEEP
javascriptjquery
silvia zulinka
silvia zulinka

Reputation: 731

jquery if checkbox checked add value true

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>

Upvotes: 0

Views: 9627

Answers (4)

Pugazh
Pugazh

Reputation: 9561

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>

Upvotes: 6

RAJNIK PATEL
RAJNIK PATEL

Reputation: 1049

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

Upvotes: 1

Prashant
Prashant

Reputation: 385

Try this : 

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

Upvotes: 1

Ravinder Gujiri
Ravinder Gujiri

Reputation: 1514

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/

Upvotes: 0

Related Questions