Question

考虑我们动态创建单选按钮，因此我们无法通过Id

访问它们

<label class="btn btn-sm btn-white" onclick="test();"> <input type="radio" value="abc" name="options"> this is a text </label>
<label class="btn btn-sm btn-white" onclick="test();"> <input type="radio" value="dfdf" name="options"> this is a text </label>
<label class="btn btn-sm btn-white" onclick="test();"> <input type="radio" value="reewr" name="options"> this is a text </label>

如何提醒点击标签内的radiobutton值？

Answer 1

＆＃13;

function test(event){
event.stopPropagation();

 console.log(event.currentTarget.firstElementChild.value);
 
}

＆＃13;

 <label class="btn btn-sm btn-white" onclick="test(event);"> <input type="radio" value="abc" name="options"> this is a text </label>
 <label class="btn btn-sm btn-white" onclick="test(event);"> <input type="radio" value="dfdf" name="options"> this is a text </label>
 <label class="btn btn-sm btn-white" onclick="test(event);"> <input type="radio" value="reewr" name="options"> this is a text </label>

＆＃13;

Answer 2

首先，您不应该使用内联JS绑定：请改用addEventListener。在addEventListener触发的回调中，您将能够通过event.target获取对其触发的元素的引用。

event.target可以引用<label>元素或<input>元素，因此我们只需通过检查{event.target.tagName元素来检查触发事件的元素。 {1}}。如果是<input>元素，我们只获取元素的value属性。

见下面的概念验证：

// Select the label elements in your DOM
// Note: You might have to adjust this!
var labelEls = document.querySelectorAll('label');

// Iterate through all selected `<label>` elements
Array.prototype.slice.call(labelEls).forEach(function(labelEl) {

  // Iteratively add the `click` event listener
  labelEl.addEventListener('click', function(event) {

    // If event is emitted by `<input>`
    if (event.target.tagName === 'INPUT') {
      console.log('Value: ' + event.target.value);
    }
  });
});

<label class="btn btn-sm btn-white"> <input type="radio" value="abc" name="options"> this is a text </label>
<label class="btn btn-sm btn-white"> <input type="radio" value="dfdf" name="options"> this is a text </label>
<label class="btn btn-sm btn-white"> <input type="radio" value="reewr" name="options"> this is a text </label>

Answer 3

试试这样：

HTML

onclick=“test(this)”

JS

function test(elmnt) {
     alert(elmnt.childNodes[1].value)
}

Answer 4

您可以使用label.control来引用与标签关联的HTML元素。还要避免编写内联事件处理程序。

document.querySelectorAll("label").forEach(e => {
  e.addEventListener("click", function(event){
    // this will refer to label
    console.log(this.control.value);
  })
});

<label class="btn btn-sm btn-white"> <input type="radio" value="abc" name="options"> this is a text </label>
<label class="btn btn-sm btn-white"> <input type="radio" value="dfdf" name="options"> this is a text </label>
<label class="btn btn-sm btn-white"> <input type="radio" value="reewr" name="options"> this is a text </label>

Answer 5

使用id标识每个输入，然后将其传递给每个test（）：

＆＃13;

<script type="text/javascript">
  function test(e, id) {
    var el = document.getElementById(id);
    console.log(el.value);
  }

</script>

<label class="btn btn-sm btn-white"> <input onclick="test(event,'id1')" type="radio" id="id1" value="abc" name="options"> this is a text </label>
<label class="btn btn-sm btn-white"> <input  onclick="test(event,'id2');" type="radio" id="id2" value="dfdf" name="options"> this is a text </label>
<label class="btn btn-sm btn-white"> <input onclick="test(event,'id3');" type="radio" id="id3" value="reewr" name="options"> this is a text </label>

＆＃13;

Answer 6

最好将classes添加到您要附加事件侦听器的一组标签上，而不是根据标记名称附加侦听器，因为您的网站网页上可能有许多标签。

我设计了一个使用vanilla JS的解决方案。检查是针对event propagation（冒泡和捕获），子元素的类型和子元素的标记名称进行的。即使我们在应用程序扩展时向这些标签添加其他子元素，这也可以保证代码的安全。

＆＃13;

var labels = document.getElementsByClassName('labels');

for (var i = 0; i < labels.length; ++i) {
  labels[i].addEventListener('click', function(event) {
    if (event.target.tagName === 'LABEL') {
      var kids = this.children;
      for (var j = 0; j < kids.length; ++j) {
        if (kids[j].type === 'radio' && kids[j].nodeName === 'INPUT') {
          console.log(kids[j].value);
        }
      }
    }
  });
}

＆＃13;

<label class="btn btn-sm btn-white labels"> <input type="radio" value="abc" name="options"> this is a text </label>

<label class="btn btn-sm btn-white labels"> <input type="radio" value="dfdf" name="options"> this is a text </label>

<label class="btn btn-sm btn-white labels"> <input type="radio" value="reewr" name="options"> this is a text </label>

＆＃13;

如何使用javascript访问标签内的radiobutton值？

6 个答案: