How to get label values of checkbox in javascript

Question

I have two checkbox, depending upon,which checkbox user clicks, I need to call other function, however, I'm not abler to get the checkbox label values.

Here is my code :

function getLabel(id)
{
  return $("#"+id).next().text();
}
function BillStatus(){
    console.log("its here");
    var label=getLabel('checkboxid1'); 
    console.log(label);
    if(label=="No") {
        //some function to call here
    }else{
       //other function to call here
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check1">
    <label>
        <input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus()" style="visibility: visible"/> 
        Yes
    </label>
</div>
<br>
<div id="check2">
    <label>
        <input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus()" style="visibility: visible" />
        No
    </label>
</div>

Have you tried using parent() rather than next()?

jcaron
– jcaron

2017-09-05 11:08:48 +00:00
Commented Sep 5, 2017 at 11:08 — jcaron
– jcaron, Commented Sep 5, 2017 at 11:08

Zakaria Acharki · Accepted Answer · 2017-09-06 08:31:29Z

6

You've several typos in your code, but the main problem comes from the return line, you should use parent() instead of next() :

  return  $("#"+id).parent().text().trim();

NOTE : Use trim() to remove the extra spaces from the label text returned.

Hope this helps.

function getLabel(id)
{
  return  $("#"+id).parent().text().trim();
}

function BillStatus(_this){
  console.log("its here");
  
  var label=getLabel(_this.id); 
  
  console.log(label);
  
  if( $(_this).parent().text().trim() === "No"){
    console.log("Nooooo");
  }else{
    console.log("Yessss");
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="check1">
    <label>
        <input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus(this)" style="visibility: visible" /> Yes
     </label>
</div>
<br>
<div id="check2">
    <label>
        <input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus(this)" style="visibility: visible" />No
    </label>
</div>

Since you're using jQuery the alternative solution will attach the click event to the common class and get the label from the currently clicked one like the example below.

$('.checkbox-container input:checkbox').on('click', function()
{
  if( $(this).parent().text().trim() === "No"){
    console.log("Nooooo");
  }else{
    console.log("Yessss");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="check1" class="checkbox-container">
    <label>
        <input type="checkbox" name="myCheckbox" id="checkboxid1"/> Yes
     </label>
</div>
<br>
<div id="check2" class="checkbox-container">
    <label>
        <input type="checkbox" id="checkboxid2" name="myCheckbox" value="No"/>No
    </label>
</div>

edited Sep 6, 2017 at 8:31

answered Sep 5, 2017 at 11:12

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

2 Comments

Prasad_Joshi Over a year ago

Its always calling to YES only, even on click on 'NO',

Zakaria Acharki Over a year ago

That because you've fixed id var label=getLabel('checkboxid1'); in your code, FIXED NOW : updated my answer by adding dynamic ones...

gaetanoM · Accepted Answer · 2017-09-05 11:34:26Z

You need to add the this keyword as parameter to your BillStatus functions.

Instead of getLabel you can simply write:

ele.parentElement.textContent.trim();

You need to use the onchange event instead of onclick.

function BillStatus(ele) {
    var label=ele.parentElement.textContent.trim();
    console.log('Label: ' + label + ' Checked: ' + ele.checked);
    if(label=="No") {
        //some function to call here
    }else{
        //other function to call here
    }
}

<div id="check1">
    <label>
        <input type="checkbox" name="myCheckbox" id="checkboxid1" onchange="BillStatus(this)" style="visibility: visible"
                /> Yes</label>
</div>
<br>
<div id="check2">
    <label>
        <input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onchange="BillStatus(this)" style="visibility: visible" />No</label>
</div>

A full javascript version, without inline code is:

document.addEventListener('DOMContentLoaded', function(e) {
   document.querySelectorAll('div[id^=check] [type="checkbox"]').forEach(function(ele, idx) {
       ele.addEventListener('change', function(e) {
           var label = this.parentElement.textContent.trim();
           console.log('Label: ' + label + ' Checked: ' + this.checked);
           if(label=="No") {
               //some function to call here
           }else{
               //other function to call here
           }
       })
   })
})

//
// on document ready
//
document.addEventListener('DOMContentLoaded', function(e) {
    //
    // for each div having aan id starting with and having a checkbox...
    //
    document.querySelectorAll('div[id^=check] [type="checkbox"]').forEach(function(ele, idx) {
        //
        // add the change event handler
        //
        ele.addEventListener('change', function(e) {
            var label = this.parentElement.textContent.trim();
            console.log('Label: ' + label + ' Checked: ' + this.checked);
            if(label=="No") {
                //some function to call here
            }else{
                //other function to call here
            }
        })
    })
})

<div id="check1">
    <label>
        <input type="checkbox" name="myCheckbox" id="checkboxid1" style="visibility: visible"
                /> Yes</label>
</div>
<br>
<div id="check2">
    <label>
        <input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" style="visibility: visible" />No</label>
</div>

user6448640 · Accepted Answer · 2017-09-05 11:33:15Z

you can try $("input[type='checkbox']:checked:last").next().text()

function getLabel(id)
{
  return $("#"+id).next().text();
}

function BillStatus(){
    console.log("its here");
    var label = $("input[type='checkbox']:checked:last").next().text(); 
    label = $.trim(label);

    if(label== "No") {
        console.log("No is checked");
    }else if(label== "Yes") {
        console.log("Yes is checked");
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="check1">
    <input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus()" style="visibility: visible"/>  
    <label>
       Yes
    </label>
</div>
<br>
<div id="check2">
    <input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus()" style="visibility: visible" />
    <label>
        No
    </label>
</div>

Raveesh · Accepted Answer · 2017-09-05 11:47:19Z

I think your are selecting the next dom element instead of parent element.Please refer this bin.

function getLabel(id)
{
  return $("#"+id).parent().text().trim();
}
function BillStatus(){  
  var elem=this.event.target.id;  
  var label=getLabel(elem); 
  console.log(label);
  if(label=="No") {
alert(label)

}else{
 alert(label)
}
}

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.9.1.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="check1">
  <label>
    <input type="checkbox" name="myCheckbox" id="checkboxid1" onclick="BillStatus()" style="visibility: visible"
           /> Yes</label>
</div>
<br>
<div id="check2">
  <label>
    <input type="checkbox" id="checkboxid2" name="myCheckbox" value="No" onclick="BillStatus()" style="visibility: visible" />No</label>


</div>
</body>
</html>

Collectives™ on Stack Overflow

How to get label values of checkbox in javascript

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related