javascript - 插入了输入单选类型的按钮

Question

我想创建 html 按钮，并将输入单选类型插入到按钮中。当单击按钮时，将检查输入 radio 类型。我使用了这段代码，但每当我单击按钮时，输入单选按钮都不会被选中。我该如何让它工作？:

<button class="button">
<input type="radio" name="input" id="choice-1"  value="0">Chlorophyll
</button>

document.querySelector('.button').addEventListener('click', function(){
document.querySelector('#choice-1').checked;
});

Answer 1

Interactive Elements

交互元素中的交互元素将不再充当交互元素。

HTML

以下演示使用 <label>作为同步到 <input type="checkbox"> 的按钮通过使用for attribute 和 <input> #id因为它的值(value)。

JavaScript

详细信息在下面的演示中注释，以下列表提供了演示中有关 JavaScript 的引用:

• HTMLFormControlsCollection

• Event Delegation

• Event.target

• Event.currentTarget

-

---

演示

演示中评论了详细信息

// Reference the <form>
var ui = document.forms['ui'];

// Register change event on <form>
ui.addEventListener('change', chx);

function chx(e) {

  // Reference <output>
  var out = ui.out;
  // Reference clicked element
  var tgt = e.target;
  // if clicked element is NOT element registered to event
  if (tgt !== e.currentTarget) {
    // Set <output> to display the #id and value of checked
    out.value = `ID: ${tgt.id} | Value: ${tgt.value}`;
  }
}

html,
body {
  font: 700 small-caps 16px/1.5 Consolas;
}

form * {
  font: inherit
}

label {
  letter-spacing: 2px;
  display: inline-block;
  padding: 1px 5px;
  color: gold;
  border: 3px ridge gold;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.6);
  user-select: none;
  cursor: pointer;
  width: 110px;
}

[type=radio] {
  transform: translateY(2.5px);
}

#out {
  display: block;
  text-align: center;
  color: tomato;
}

<form id='ui'>

  <label for='rad0'>Radio 1&nbsp;
    <input id='rad0' name='rad' type='radio' value='0'>
  </label>

  <label for='rad1'>Radio 2&nbsp;
    <input id='rad1' name='rad' type='radio' value='1'>
  </label>

  <label for='rad2'>Radio 3&nbsp;
    <input id='rad2' name='rad' type='radio' value='2'>
  </label><br><br>

  <output id='out'></output>

</form>