我有两个checkbox，具体取决于checkbox用户点击，我需要调用其他功能，但是，我无法获取checkbox标签值
这是我的代码：
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>
答案 0 :(得分：4)
您的代码中存在多个拼写错误，但主要问题来自返回行，您应该使用parent()代替next()：
return $("#"+id).parent().text().trim();
注意：使用trim()从返回的标签文本中删除多余的空格。
希望这有帮助。
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>
由于您正在使用jQuery，替代解决方案会将click事件附加到公共类，并从当前单击的标签中获取标签，如下例所示。
$('.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>
答案 1 :(得分：0)
您需要将此关键字作为参数添加到 BillStatus 函数中。
而不是 getLabel ，您只需写下：
ele.parentElement.textContent.trim();
您需要使用 onchange 事件而不是 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>
完整的javascript版本，没有内联代码：
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>
答案 2 :(得分：0)
您可以尝试$("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>
答案 3 :(得分：0)
我认为你正在选择下一个dom元素而不是父元素。请参考这个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>