How to check the condition if checkbox is clicked or not using javascript/jquery?

Question

My checkBoxes are dynamic and I only need to check condition if my checkbox with "OTHERS" are clicked or not.So My checkboxes are:

<div class="form-group" id="documents">
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
</div>

So i tried to check if the "Others" checkboxes is checked or not but alert() is not triggered.

if($("span:contains('OTHERS')").prop('checked') == true){
                alert("here");

            }

Maheer Ali · Accepted Answer · 2019-01-27 06:45:29Z

2

you are not checking prop if input elm instead you are checking prop of span use this code

//gets the input
const elm = $("span:contains('OTHERS')").siblings()[0];
if($(elm).prop('checked')) alert("here");

answered Jan 27, 2019 at 6:45

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ashwin karki Over a year ago

is there a way i can put value="3" of OTHERS in a vairable if is is checked?

Maheer Ali Over a year ago

use $(elm).prop('value'); to access value of input. Then you can set it to a variable under the condition when alert('here') is present

Dakshim Chhabra · Accepted Answer · 2019-01-27 06:52:13Z

1

It seems, we need to first check if Checkbox is checked or not, and then check if its siblings text value is equal to 'OTHERS'.

I have triggered the alert in this way:

  $("input[type='checkbox']").change(function(){
   if($(this).prop('checked') == true && $(this).siblings("span").text() == "OTHERS"){
        alert("here");
    }
  });

We can also change HTML to simplify it further by directly assigning value="OTHERS" to checkbox.

$("input[value='OTHERS']").change(function(){
     if($(this).prop('checked') == true){
            alert("here");
        }
  });

answered Jan 27, 2019 at 6:52

Dakshim Chhabra

981 silver badge7 bronze badges

2 Comments

ashwin karki Over a year ago

is there a way i can put value="3" of OTHERS in a vairable if is is checked?

Dakshim Chhabra Over a year ago

Yes, you can try the code like this : $("input[value='3']")

Bibberty · Accepted Answer · 2019-01-27 07:00:03Z

This will look across all checkboxes and check the one that has 'OTHERS'.

document.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#check').addEventListener('click', () => {
    document.querySelectorAll('input[type="checkbox"]').forEach(chk => {
      if(chk.parentNode.querySelector('span').innerText == 'OTHERS') {
        alert(chk.checked);
      }
    });
  });


});

<div class="form-group" id="documents">
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1" checked=""> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2" checked=""> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3" checked=""> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
</div>
<!-- Just for the answer -->
<button id="check">Check</button>

gavgrif · Accepted Answer · 2019-01-27 07:36:08Z

0

This is a DOM traversal issue - you need to go from the span UP to the parent and then DOWN to find the input- that is checked.

Also - note that putting checked="" in the input is the equivalent of checked="checked" - which is why this is showing as checked in the snippet.

EDIT - solution updated to allow the variable to be set based on the click of the label of "OTHERS"

let myvariable;

$('label').click(function(){
  let spanText = $(this).find('span').text();
  let inputChecked = $(this).find('input').is(':checked')

  if(spanText == 'OTHERS' && inputChecked){
     myvariable = 3;
     alert(myvariable);
   }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group" id="documents">
   <label> <input id="check_id1" type="checkbox" value="1" class="chk1"> <span>Invoice</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id2" type="checkbox" value="2" class="chk2"> <span>Packing List</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
   <label> <input id="check_id3" type="checkbox" value="3" class="chk3"> <span>OTHERS</span>
   <br>
   </label>
   <div style="padding-bottom: 5px"></div>
</div>

edited Jan 27, 2019 at 7:36

answered Jan 27, 2019 at 6:49

gavgrif

15.5k2 gold badges30 silver badges31 bronze badges

2 Comments

ashwin karki Over a year ago

is there a way i can put value="3" of OTHERS in a vairable if is is checked?

gavgrif Over a year ago

I just amended my solution to allow the value of 3 to be sotred in a variable if Others is checked.

Hamzeh.Ebrahimi · Accepted Answer · 2019-01-27 11:14:40Z

0

try this

const elm = $("span:contains('OTHERS')").closest("label").find("input[type=checkbox]");
if($(elm).prop('checked')) alert("here");

answered Jan 27, 2019 at 11:14

Hamzeh.Ebrahimi

3051 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to check the condition if checkbox is clicked or not using javascript/jquery?

5 Answers 5

2 Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related