How to check for a checkbox to be checked?

Question

I have 2 checkboxes. I need one, not both, but at least 1 to be checked. It is not a multiple selection but zero is not accepted. If one is checked, this line will work jQuery('#wiz_menu.nav-tabs > .active').next('li').find('a').trigger('click'); otherwise it should alert. The following makes it alerting all the time.

UPDATE

I am not using the submit button or I would have used the validate plugin. It is a normal button to go next in the wizard <button type="button" class="btnNext">Next step</button>

HTML

<div class="form-group">
    <label for="usp-category-8" class="usp-checkbox usp-cat usp-cat-0">
        <input type="checkbox" name="usp-category[]" id="usp-category-8" value="8" data-required="true" class="usp-input usp-input-category"> 
        Cultura
    </label>
    <label for="usp-category-7" class="usp-checkbox usp-cat usp-cat-0">
        <input type="checkbox" name="usp-category[]" id="usp-category-7" value="7" data-required="true" class="usp-input usp-input-category"> 
        Scienze
    </label>
    <input type="hidden" name="usp-category-required" value="1">
</div>

JS

jQuery('.btnNext').on("click", function(){
  if(jQuery(".tab-pane").is("#step1")) {
    var isChecked = false;
    $('input[type=checkbox]').on("change", function () {
      isChecked = true;
    });
    if ( isChecked ) {
      jQuery('#wiz_menu.nav-tabs > .active').next('li').find('a').trigger('click');
    } else {
      alert( 'Please, check at least one checkbox!' );
    }  
  }
});

Possible duplicate: http://stackoverflow.com/q/2204250/80836 — Andreas, Apr 16 '17 at 19:18
Setting to true on change will set it to true even when unchecking. But if it's not working at all, try using click (the logic will still be wrong though). — inarilo, Apr 16 '17 at 19:21
Because the behavior you're now implementing with checkboxes is the default behavior of radio buttons. — JJJ, Apr 16 '17 at 19:24
@JJJ ok thanks, I have accept an answer as it is correct, however I have posted my own answer too for the solution I have adopted in my case which takes your suggestion in consideration. — Roberto Marras, Apr 16 '17 at 19:31

Sebastián Palma · Accepted Answer · 2017-04-16T19:30:44.917

With jQuery you can use is:

$('#form').on('submit', function(e) {
  e.preventDefault();
  if ($('input[name="hi"]').is(':checked')) {
    console.log('checked');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
  <input type="checkbox" name="hi" value="hi">Hallo<br>
  <input type="checkbox" name="gb" value="gb">Tschuss<br>
  <input type="submit" value="Submit">
</form>

Adapted to your code:

$('.btnNext').click(function(e) {
 e.preventDefault();
  if ($('#usp-category-7').is(':checked') || $('#usp-category-8').is(':checked')) {
    console.log('at least one is checked');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label for="usp-category-8" class="usp-checkbox usp-cat usp-cat-0">
        <input type="checkbox" name="usp-category[]" id="usp-category-8" value="8" data-required="true" class="usp-input usp-input-category"> 
        Cultura
    </label>
    <label for="usp-category-7" class="usp-checkbox usp-cat usp-cat-0">
        <input type="checkbox" name="usp-category[]" id="usp-category-7" value="7" data-required="true" class="usp-input usp-input-category"> 
        Scienze
    </label>
    <input type="hidden" name="usp-category-required" value="1">
    <button class="btnNext">Next</button>
</div>

it is not a submit button i have, otherwise I would have used the validate plugin, it is a normal button to go next n the wizard — Roberto Marras, Apr 16 '17 at 19:21
It's meant to be an example of how to use `is` @RobertoMarras. — inarilo, Apr 16 '17 at 19:26
ok thanks, I accept this as it is correct, however I have posted my own answer too for the solution I have adopted in my case. — Roberto Marras, Apr 16 '17 at 19:30
Check the updated answer @RobertoMarras, I've added an example with your code. — Sebastián Palma, Apr 16 '17 at 19:31

score 1 · Answer 2 · answered Apr 16 '17 at 19:29

Thanks to a comment, I personally resolved it like this, making them radio buttons. But I will accept the other answer as it is correct.

jQuery('.btnNext').on("click", function(){
  if(jQuery(".tab-pane").is("#step1")) {
   if($('input[type=radio').is(':checked')) {
      jQuery('#wiz_menu.nav-tabs > .active').next('li').find('a').trigger('click');
    } else {
      alert( 'Please, check at least one checkbox!' );
    }  
  }
});

How to check for a checkbox to be checked?

2 Answers2