Javascript - Compare if any checkbox is marked or not

Question

Sure that here are many solutions for this problem, but I did not find a solution for me.

I have a form with several checkboxes to choose an option (radio1a, radio1b,radio1c,etc), but I cannot detect if my user has not checked a box, before submit the form.

I have tried the sample script, but the alerts are loaded with the page, and it is not what I am looking for.

Note: The "checked" option (for any checbox), is not a possibility for me, I have to leave all boxes unchecked.

What am I doing wrong here?

Thanks in advance!

HTML:

<input id="radio1a" class="radiosobres" type="radio" name="radio" value="something>

<input id="radio1b" class="radiosobres" type="radio" name="radio" value="something>

<input id="radio1c" class="radiosobres" type="radio" name="radio" value="something>

<input id="radio1d" class="radiosobres" type="radio" name="radio" value="something>

<input id="radio1e" class="radiosobres" type="radio" name="radio" value="something>

<!-- ============== -->

<input id="pedir-sobres" type="submit" value="Pedir"/>

Script Test:

// ===========

jQuery 2.2.4

// ===========

$(".radiosobres").each(function () {
var id = $(this).attr("id");
if ($("#" + id).is(":not(:checked)")) {
alert("something...");
}
});

Sascha · Accepted Answer · 2020-08-04T17:50:15.060

2

I set on every radiobutton an clickevent which adds a class clicked to it. So if you click the submit-button I can check which of the radios has the clicked-class and you can act for this.

$(".radiosobres").click( function() {
    $(this).addClass('clicked');
    }
)

$('#pedir-sobres').click(function() {
    let checkOk = false;
    $(".radiosobres").each(function () {
      if ( $(this).hasClass('clicked') ) {
        checkOk = true;
      }
    })
    
    if (!checkOk) {
      alert('Not all radios checked');
      return false;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form>
<input id="radio1a" class="radiosobres" type="radio" name="radio" value="something">
<input id="radio1b" class="radiosobres" type="radio" name="radio" value="something">

<input id="radio1c" class="radiosobres" type="radio" name="radio" value="something">

<input id="radio1d" class="radiosobres" type="radio" name="radio" value="something">

<input id="radio1e" class="radiosobres" type="radio" name="radio" value="something">

<!-- ============== -->

<input id="pedir-sobres" type="submit" value="Pedir"/>
</form>

edited Aug 04 '20 at 17:50

answered Aug 04 '20 at 16:42

Sascha

4,576
3
13
34

Your approach may work (thanks), but I get a lot of alerts (one for each unchecked box). Can it be summed up to just one alert? Thanks. – Pablo_Web Aug 04 '20 at 16:51
I changed it so it alerts if all ok or some are false. – Sascha Aug 04 '20 at 16:57
@Saasha Thank you very much, but something is not working in the script. It doesn't matter if I check (or not) any box, **always display the alert** = "Not all radios checked". How I can be resolve this? Thank! – Pablo_Web Aug 04 '20 at 17:04
It only say it is ok if all 5 radios had been clicked in any sequence. Do you want just to look if the user has clicked just at one or more of the radios? – Sascha Aug 04 '20 at 17:06
It is very good that the script detects that there are no checked checkboxes. What would complete its function is that the script does not notify (to user), that an option has been checked (it is irrelevant for me). If you run the snipet of their answer you will see that it does not work (properly). I need an alert, ok, **but only if there are NO checked boxes**. You can help me whit this? Thanks! – Pablo_Web Aug 04 '20 at 17:18
Ok, now it alerts only if the user hasn`t clicked on any radio. – Sascha Aug 04 '20 at 17:29
Thank, but by accepting the alert, the form is sent anyway. **Is there a way to stop shipping?** Thanks! – Pablo_Web Aug 04 '20 at 17:41
1

OK, by adding `return false;` the propagation is stopped and the form will not be send. – Sascha Aug 04 '20 at 17:51
I understand your help, and I appreciate your effort, but if I add the line "return false;", the form is not sent ... All is stopped. Any solution to this? – Pablo_Web Aug 04 '20 at 18:16
Ok @Sascha Missing enclosing with **{ }** for `if (! CheckOk)` . Thanks! – Pablo_Web Aug 04 '20 at 19:11

score 1 · Answer 2 · answered Aug 04 '20 at 16:37

A couple things here. First off, your alert is firing because you're setting it to fire when the radio is unchecked. Therefore, as soon as the page loads, each element runs the function, the unchecked condition is true, and the alert fires.

Secondly, you have some syntax issues in your HTML. Get rid of the extra spaces in your parameter strings, and most importantly, don't forget the final double quotes " in your HTML <inputs>. In your example every single value="something parameter is missing its closing ".

Lastly, you don't need JQuery to make sure one of the radios is selected. Just mark one as required:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<form>
  <input id="radio1a" class="radiosobres" type="radio" name="radio" value="something" required>

  <input id="radio1b" class="radiosobres" type="radio" name="radio" value="something">

  <input id="radio1c" class="radiosobres" type="radio" name="radio" value="something">

  <input id="radio1d" class="radiosobres" type="radio" name="radio" value="something">

  <input id="radio1e" class="radiosobres" type="radio" name="radio" value="something">

  <!-- ============== -->

  <input id="pedir-sobres" type="submit" value="Pedir">
</form>

I understand your approach (thanks), and I've already tried the "required" option, but (like "checked" option), I can't use it here. I need to trigger an "alert" if any of the boxes is not checked, ant this before submiting the form. Thanks. — Pablo_Web, Aug 04 '20 at 16:47

Javascript - Compare if any checkbox is marked or not

2 Answers2