如何在javascript中获取复选框的标签值

Question

我有两个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> 

Answer 1

你的代码中有几个拼写错误，但主要问题来自返回行，你应该使用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> 

Answer 2

您需要将this关键字作为参数添加到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> 

Answer 3

你可以尝试$("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> 

Answer 4

我认为你正在选择下一个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>