时间戳

首页 > 解决方案 > 选中复选框时如何使单选按钮成为必需？

javascript - 选中复选框时如何使单选按钮成为必需？

问题描述

我有这样的复选框：

<div class="custom-control custom-checkbox custom-control-inline">
    <input type="checkbox" class="custom-control-input" id="checkMain" onclick="showMain()">
    <label class="custom-control-label" for="checkMain">Main</label>

像这样的收音机：

<div id = "first" style="display:none">
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="1">
    <label class="custom-control-label" for="1">1</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="2">
    <label class="custom-control-label" for="2">2</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="3">
    <label class="custom-control-label" for="3">3</label>
  </div>
  <div class="custom-control custom-radio custom-control-inline">
    <input type="radio" class="custom-control-input" id="3">
    <label class="custom-control-label" for="3">3</label>
  </div>
</div>

并在 js 中像这样运行：

function pokazGlowne() {
  // Get the checkbox
  var checkBox = document.getElementById("checkMain");
  // Get the output text
  var text = document.getElementById("first");

  // If the checkbox is checked, display the output text
  if (checkBox.checked == true){
    text.style.display = "block";
  } else {
    text.style.display = "none";
  }
}

它只是在选中或取消选中复选框时显示或隐藏我的收音机。现在我想在我的功能中添加另一件事。我想让我的单选按钮在此复选框被选中或不需要时，当它未被选中时。我不知道该怎么做。我可以制作所需的单选按钮name吗？

标签： javascripthtml

解决方案

函数应该是可重用的。

  • require是一个属性。因此，您需要setAttribute设置它。
  • 用于el.classList.toggle(class)切换 CSS 类。
  • 用于document.querySelectorAll("#id input[type='radio']")访问里面的所有收音机#id。循环通过它单独访问每个收音机。

例子

function toggleAttributes(checkbox, radios, attribute, attributeValue) {
  for (var i = 0; i < radios.length; i += 1) {
    // If checkbox is checked, set the attribute and the attribute value. If not, remove the attribute
    checkbox.checked === true ? radios[i].setAttribute(attribute, attributeValue) : radios[i].removeAttribute(attribute);
  }
}

function toggleRadios(el, id) {
  var radiosSelector = `#${id} input[type='radio']`,
    container = document.getElementById(id),
    radios = document.querySelectorAll(radiosSelector);
  container.classList.toggle("hide");
  toggleAttributes(el, radios, "required", "");
}
.hide {
  display: none;
}
<div class="custom-control custom-checkbox custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="checkMain" onclick="toggleRadios(this, 'first')">
  <label class="custom-control-label" for="checkMain">First</label>

  <div id="first" class="hide">
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="1">
      <label class="custom-control-label" for="1">1</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="2">
      <label class="custom-control-label" for="2">2</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="3">
      <label class="custom-control-label" for="3">3</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="3">
      <label class="custom-control-label" for="3">3</label>
    </div>
  </div>
</div>

<!-- Reusage of toggleRadios(...) -->

<div class="custom-control custom-checkbox custom-control-inline">
  <input type="checkbox" class="custom-control-input" id="checkMain" onclick="toggleRadios(this, 'second')">
  <label class="custom-control-label" for="checkMain">Second</label>

  <div id="second" class="hide">
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="1">
      <label class="custom-control-label" for="1">1</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="2">
      <label class="custom-control-label" for="2">2</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="3">
      <label class="custom-control-label" for="3">3</label>
    </div>
    <div class="custom-control custom-radio custom-control-inline">
      <input type="radio" class="custom-control-input" id="3">
      <label class="custom-control-label" for="3">3</label>
    </div>
  </div>
</div>

暗示

id's不允许以数字开头：

HTML 中 id 属性的有效值是什么？

推荐阅读