插入输入单选类型的按钮

Question

我想创建HTML按钮，并将输入单选类型插入按钮中。单击按钮时，将检查输入的无线电类型。我使用了这段代码，但是每当我单击按钮时，都不会选中输入单选按钮。我如何使其工作？：

<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

下面的演示通过使用 for attribute 和<label> {{1}，将<input type="checkbox">作为与<input>同步的按钮}。

JavaScript

详细信息在下面的演示中进行了评论，以下列表提供了有关演示中JavaScript的参考：

• HTMLFormControlsCollection

• Event Delegation

• Event.target

• Event.currentTarget

-

---

演示

演示中评论的详细信息

#id

// 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;
}

Answer 2

您需要执行document.querySelector('#choice-1').checked = true;，因为.checked需要分配一个布尔值。

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

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