Question

我有这样的复选框：

<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所需的单选按钮吗？

Answer 1

这可能会解决您的问题。

$('#form1').submit(function() {
    if ($('input:checkbox', this).is(':checked') &&
        $('input:radio', this).is(':checked')) {
        // everything's fine...
    } else {
        alert('Please select something!');
        return false;
    }
});

OR

$('#form1').submit(function(){
    if ($(':checkbox:checked', this)[0] && $(':radio:checked', this)[0]) {
        // everything's fine...
    } else {
        alert('Please select something!');
        return false;
    }
});

如果您要求用户选中复选框以提交表单。

$(document).ready(function(){
        $('#yourinput').required = true;
});

Answer 2

功能应可重复使用。

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不允许以数字开头：

What are valid values for the id attribute in HTML?

选中复选框时如何制作单选按钮？

2 个答案:

实施例