Toggle Checkbox value using jquery

Question

I am generating multiple checkboxes using ajax call and I want to toggle the checkbox value from 0 to 1 and vice versa. Here 0 is the unchecked state and 1 is the checked state. Tried a couple of ways but could not achieve it.

  <div class="form-group">
       
 <label class="control-label col-sm-2" for="department">Departments:</label>
 <div class="col-sm-10" id="department">
 
    <!--- Here goes the ajax generated checkboxes. The 1 and 0 is a boolean value coming out of database-->
  <div class="form-check form-check-inline">
      <input class="form-check-input"  type="checkbox" id="car" name="car" checked="checked" value="1">
       <label class="form-check-label col-sm-2" for="car">Finishing</label>
       </div>
       
<div class="form-check form-check-inline">
      <input class="form-check-input"  type="checkbox" id="bike" name="bike" value="0">
      <label class="form-check-label col-sm-2" for="bike">Assembly</label>
      </div>   
      
       
 </div>
   </div>

Update: I am using something like this just to access check if the checkbox once checked spits out true to the console and it doesn't work.

$( "input" ).change(function() { var $input = $( this ); console.log($input.is( "checked" )); }).change();

what couple of ways have you tried? `element.checked = true;` works fine. And element ID must be unique, you have duplicate IDs — vanowm, Aug 18 '21 at 00:39
I tried different examples posted online using jquery but none of them helped me so far. The way you're suggesting is through DOM ? — Nisarg Shah, Aug 18 '21 at 00:43
@NisargShah please [edit] your question if you want to add more details. Never add question details as comments. Please search Stack Overflow more. There are literally millions of pages available. All basic questions have been resolve multiple times by 2021. — mickmackusa, Aug 18 '21 at 01:01

score 0 · Answer 1 · answered Aug 18 '21 at 00:46

0

You can check if the element is checked or not then you can easily change the value of the element by using jquery val() method

$( "input:checked" ).val(newValue)

answered Aug 18 '21 at 00:46

obeda

82
10

How likely is it that this advice already exists in the millions of questions on Stack Overflow? Did you search for duplicate pages before you posted your answer? Most contributors do not. – mickmackusa Aug 18 '21 at 00:47
I have never thought about it that way I just wanted to give easy help, I will put that in my mind next time. – obeda Aug 18 '21 at 00:51
1

Content curators sadly represent <1% of the population on Stack Overflow. This is why is it rare and unpopular to make decisions that are in the best interests of Stack Overflow. Most people think to themselves --- "Hmm, I know the answer, I'll post one" instead of asking themselves if the question is clear, complete, unique and on-topic. See my pain: https://meta.stackoverflow.com/q/410790/2943403 – mickmackusa Aug 18 '21 at 00:56
The value of the field needn't ever change. The script that receives the form data will be able to determine if a value is supplied (because the field was checked) or if the value is not supplied (not checked). – mickmackusa Aug 18 '21 at 01:06

Toggle Checkbox value using jquery

1 Answers1