如何在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()从返回的标签文本中删除多余的空格。

希望这可以帮助。

  return  $("#"+id).parent().text().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");
  }
}

由于您使用的是 jQuery，替代解决方案会将点击事件附加到公共类并从当前点击的类中获取标签，如下例所示。

<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>

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