如何使用一個單選按鈕選擇兩個輸入欄位

所以我想要做的是將兩個輸入欄位系結到一個單選按鈕中供用戶選擇。輸入欄位的值將動態生成，但可以通過單個單選按鈕進行選擇。我試過做引導，但沒有用。

<!-- Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div class="form-check form-check-inline">
  <input class="form-check-input" id="bind1" type="radio" name="name1" id="inlineRadio" value="valu1">
  <input class="form-check-input" id="bind2" type="radio" name="name2" id="inlineRadio" value="valu2">
  <label class="form-check-label" for="inlineRadio">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="bind1" type="radio" name="name1" id="inlineRadio" value="val8">
  <input class="form-check-input" id="bind2" type="radio" name="name2" id="inlineRadio" value="val12">
  <label class="form-check-label" for="inlineRadio">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="bind1" type="radio" name="name1" id="inlineRadio" value="valu78">
  <input class="form-check-input" id="bind2" type="radio" name="name2" id="inlineRadio" value="890">
  <label class="form-check-label" for="inlineRadio">3</label>
</div>

uj5u.com熱心網友回復：

您應該為每 2 個按鈕添加相同的名稱，以使它們按預期作業。

注意：id 在你的 HTML 中應該是唯一的

<!-- Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">



<!-- Body -->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name1" value="valu1">
  <input class="form-check-input" type="radio" name="name1" value="valu2">
  <label class="form-check-label" >1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name2" value="val8">
  <input class="form-check-input" type="radio" name="name2" value="val12">
  <label class="form-check-label" >2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name3" value="valu78">
  <input class="form-check-input" type="radio" name="name3" value="890">
  <label class="form-check-label" >3</label>
</div>

uj5u.com熱心網友回復：

此解決方案將導致在選擇一個單選按鈕時選擇所有同級單選按鈕。

var buttons = document.querySelectorAll('.form-check-inline input:first-child');
for (var i = 0; i < buttons.length; i  ) {
    buttons[i].addEventListener('click', function() {
        // this.parent.querySelectorAll('input')
        var children = this.parentNode.getElementsByTagName('input');
        for (var j = 0; j < children.length; j  ) {
            children[j].checked = true;
        }
    });
}

.form-check-inline input[type="radio"]:not(:first-child) {
    display: none;
}

<!-- Twitter-Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<!-- Body -->
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name1" id="inlineRadio" value="valu1">
  <input class="form-check-input" type="radio" name="name2" id="inlineRadio" value="valu2">
  <label class="form-check-label" for="inlineRadio">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name1" id="inlineRadio" value="val8">
  <input class="form-check-input" type="radio" name="name2" id="inlineRadio" value="val12">
  <label class="form-check-label" for="inlineRadio">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="name1" id="inlineRadio" value="valu78">
  <input class="form-check-input" type="radio" name="name2" id="inlineRadio" value="890">
  <label class="form-check-label" for="inlineRadio">3</label>
</div>

標籤：javascript html 查询 css 推特引导

上一篇：如何在Jinja中更改子模板的背景顏色？

下一篇：如何洗掉Bootstrap5中的所有斷點？