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

Posted 2023-05-08

【中文标题】如何在javascript中获取复选框的标签值

【英文标题】：How to get label values of checkbox in javascript

【发布时间】：2018-02-13 15:45:38

【问题描述】：

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

【问题讨论】：

您是否尝试过使用parent() 而不是next()？

【参考方案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，因此替代解决方案会将单击事件附加到公共类并从当前单击的类中获取标签，如下例所示。

$('.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>

【讨论】：

它总是只调用“是”，即使点击“否”，

那是因为您已在代码中修复了 id var label=getLabel('checkboxid1');，现在已修复：通过添加动态答案更新了我的答案...

【参考方案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>

【参考方案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>

【参考方案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>