How to make radio button required when checkbox is checked?

Question

I have checkbox like this:

<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>

radio like this:

<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>

and function in js like this:

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

and it's just showing or hiding my radio when checkbox is checked or unchecked.. Now I want to add another thing to my function. I want to make my radio buttons required when this checkbox is checked or not required, when it's unchecked.. I have no idea how to do it. Can I make radio buttons required by name?

You can add/remove the `required` property to one or all of `radio` input elements. E.g. search for the first `[type="radio"]` descendant of `text` and set it's `required` property. — t.niese, Jun 03 '18 at 10:26

emran · Answer 1 · 2018-06-03T10:36:36.283

0

this may solve your problem.

$('#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;
    }
});

if you want to require users to check a checkbox in order to submit a form.

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

edited Jun 03 '18 at 10:36

answered Jun 03 '18 at 10:30

emran

29
3

Yes, but what I have to do when i have few checkboxes, and few radio buttons for that? All of them should work like that. – Dr. Weiss Jun 03 '18 at 10:34
you can use #id or .class for specify the checkbox – emran Jun 03 '18 at 10:41
you can use #id or .class for specify the checkbox. or you can do like this : here js code: if ($('input[name='bla[]']:checkbox', this).is(':checked') && ............ – emran Jun 03 '18 at 10:53

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Functions should be reusable.

require is an attribute. Therefore you need setAttribute to set it.
use el.classList.toggle(class) to toggle with a CSS class.
use document.querySelectorAll("#id input[type='radio']") to access all radios inside #id. Loop through it to access each radio individually.

Example

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>

Hint

id's starting with a number are not allowed:

What are valid values for the id attribute in HTML?

How to make radio button required when checkbox is checked?

2 Answers2

Example