如何检查要检查的复选框?

时间:2017-04-16 19:14:48

标签: javascript jquery

我有2个复选框。我需要一个,而不是两个,但至少 1要检查。它不是多重选择,但不接受零。如果选中一个,此行将起作用jQuery('#wiz_menu.nav-tabs > .active').next('li').find('a').trigger('click');,否则它应该发出警报。以下内容使其始终发出警报。

更新

我没有使用提交按钮,或者我会使用validate plugin。这是向导<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!' );
    }  
  }
});

2 个答案:

答案 0 :(得分:2)

使用jQuery,您可以使用is

&#13;
&#13;
$('#form').on('submit', function(e) {
  e.preventDefault();
  if ($('input[name="hi"]').is(':checked')) {
    console.log('checked');
  }
});
 
&#13;
<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>
&#13;
&#13;
&#13;

改编自您的代码:

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

答案 1 :(得分:1)

感谢评论,我亲自解决了这个问题,将它们作为单选按钮。但我会接受另一个答案,因为它是正确的。

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