How to get label values of checkbox in javascript
Solution 1
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>
Solution 2
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>
Prasad_Joshi
Updated on July 08, 2022Comments
-
Prasad_Joshi almost 2 years
I have two
checkbox
, depending upon,whichcheckbox
user clicks, I need to call other function, however, I'm not abler to get thecheckbox
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>