選中復選框后，如何使單選按鈕成為必需？

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

要么

$('#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以數字開頭是不允許的：

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