jquery if checkbox checked add value 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>

your question is not very clear can you clarify. also include the JS in OP — guradio
– guradio, Commented Mar 30, 2017 at 7:22

Pugazh · Accepted Answer · 2017-03-30 07:41:26Z

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>

Prashant · Accepted Answer · 2017-03-30 07:37:24Z

1

Try this :

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

edited Mar 30, 2017 at 7:37

answered Mar 30, 2017 at 7:30

Prashant

3852 silver badges8 bronze badges

Comments

RAJNIK PATEL · Accepted Answer · 2017-03-30 07:41:18Z

1

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

answered Mar 30, 2017 at 7:41

RAJNIK PATEL

1,0491 gold badge17 silver badges30 bronze badges

1 Comment

RAJNIK PATEL Over a year ago

@silviazulinka Welcome brother

Ravinder Gujiri · Accepted Answer · 2017-03-30 07:35:56Z

0

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/

answered Mar 30, 2017 at 7:35

Ravinder Gujiri

1,52410 silver badges14 bronze badges

2 Comments

Pugazh Over a year ago

Where is the <label> ?

Pugazh Over a year ago

@silviazulinka. Thanks. But this answer is missing the <label>. This answer will fail if <label> is added.

Collectives™ on Stack Overflow

jquery if checkbox checked add value true

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related