jquery if checkbox is not selected

Question

What is wrong in following jquery code ? If the menu which contains value 1 is selected, at least one submenu must be checked.

It is not working, if submenu is checked, still it alert message and is stopping. I am trying adding [name='submenu[]'] or storing value in variable but it doesn't work.

if ($("[name='menu[]']:checked").val() == 1) {
  if ($("[name='submenu[][]']:checked").length == 0) {
    alert('Select at least one submenu ');
    return false;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li><input type="checkbox" name="menu[]" value="1">News
    <ul>
      <li><input type="checkbox" name="submenu[1][]" value="1">Local</li>
      <li><input type="checkbox" name="submenu[1][]" value="2">National</li>
    </ul>
  </li>
  <li><input type="checkbox" name="menu[]" value="2">Views</li>
  <li><input type="checkbox" name="menu[]" value="3">Comment</li>
</ul>

Selector is incorrect, it should be $("[name='submenu[1][]']:checked") — Satpal
– Satpal, Commented Jun 13, 2018 at 10:47
see jquery is() function...api.jquery.com/is ... usage: $(element).is(':checked') — Roy Bogado
– Roy Bogado, Commented Jun 13, 2018 at 10:47
Surely if you click the parent checkbox then all child checkboxes should be selected, not just one of them. Also, I placed your code in a snippet. It appears to have an error due to the return statement. Could you please edit the question to include the full event handler you're executing the code in — Rory McCrossan
– Rory McCrossan, Commented Jun 13, 2018 at 10:47
You should use a startswith attribute selector [name^="submenu"] — Pete
– Pete, Commented Jun 13, 2018 at 10:49

Bhumi Shah · Accepted Answer · 2018-06-13 10:54:29Z

1

You can do it this way : https://codepen.io/creativedev/pen/aKwJGW

$(document).ready(function() {
  $('input[type="checkbox"]').click(function () {
      if ($("[name='menu[]']:checked").val() == 1) {
                console.log($("[name^='submenu']:checked").length);
        if ($("[name^='submenu']:checked").length == 0) {
          alert('Select at least one submenu ');
          //return false;
        }
      }
    });
});

answered Jun 13, 2018 at 10:54

Bhumi Shah

9,50210 gold badges69 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Prashanth · Accepted Answer · 2018-06-13 10:56:05Z

BY looking at you code what i understand is that you want to validate that atleast one checkbox must be cheked

give same class to similar check boxes like,

<li><input type="checkbox" class="submenuCkeckbox" name="submenu[1][]" value="1">Local</li>
<li><input type="checkbox"  class="submenuCkeckbox" name="submenu[1][]" value="2">National</li>

in the validating function have a flag by default it will be set to false and that flag will be set if atleast one is cheked

function validate(){
    var alertFlag = false;

    $(".submenuCkeckbox").each(function () {
        if ($(this).is(':checked')) {
            alertFlag = true;
        }
    });

    if (!alertFlag ) {
        alert('Select Atleast one checkbox');
    }
}

Collectives™ on Stack Overflow

jquery if checkbox is not selected

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related