选中多个复选框时验证其他

Posted 2023-05-09

【中文标题】选中多个复选框时验证其他

【英文标题】：Validation on other when more than one checkbox is checked

【发布时间】：2015-08-25 13:20:54

【问题描述】：

我有一个包含一系列复选框的表单。当另一个复选框被选中时，如果您没有填写另一个文本框，则会出现一个警告。

如果我选择了多个复选框，它根本不会生效？

<form>
  <div id="form-2" class="pages active" data-page="form-2" style="display: block;">
  <p>Please indicate below the quality issue(s) you were not happy with. Pick as many options as apply. <span class="required">*</span></p>
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="test">
    <input type="checkbox" name="qual-form-2[]" value="Other, please specify in the box below">
    <input type="text" name="qual-form-other-form-2" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false">
   <button class="next-page" data-page-id="form-2">Next</button>
  </div>
</form>

    <script>
    if (pageCurrent.data('page') == 'form-2') 
      var answer = pageCurrent.find('input[name="qual-form-2[]"]:checked').val();

     if ( (answer == 'Other, please specify in the box below') && ($('input[name="qual-form-other-form-2"]').val().length > 0)) 
       $('input[name="qual-form-other-form-2"]').removeClass('empty');
           return true;
      else if ( (answer == 'Other, please specify in the box below') && (!$('input[name="qual-form-other-form-2"]').val().length > 0)) 
           alert('Please specify other');
           $('input[name="qual-form-other-form-2"]').addClass('empty');
               return false;
      else if ( (answer == 'Other, please specify in the box below') && (!$('input[name="qual-form-other-form-2"]').val().length > 0) && ($('input[name="qual-form-2[]').is(":checked"))) 
          alert('Please specify other');
          $('input[name="qual-form-other-form-2"]').addClass('empty');
             return false;
      else if ($('input[name="qual-form-2[]').is(":checked")) 
             return true;
      else  
             alert('Validation errors occurred. Please confirm the fields and submit it again.');
     

    
   </script>

【问题讨论】：

请分享相关的html代码

$('input[name="qual-form-2[]').attr('checked') 它总是返回 string不是 Boolean 所以使用 prop()

谢谢@Bala - 我会看看我能在 prop() 上找到什么

@BhushanKawadkar - 抱歉我现在更新了代码

【参考方案1】：

试试这个：更改您的按钮 type="button" 并调用以下脚本。

$(function()
    $('.next-page').click(function()
        var checkCount = $('input[name="qual-form-2[]"]:checked').length;
        //check atleast one checkbox checked
        if(checkCount > 0)
        
           var checkOther = $('input[name="qual-form-2[]"]:last');
           var checkNotOther = $('input[name="qual-form-2[]"]:checked').not(checkOther);
           //if 'other' and any of the rest is checked show alert
            if(checkNotOther.length > 0 && checkOther.is(':checked'))
           
               $('input[name="qual-form-other-form-2"]').addClass('empty');
                alert('Please select either "Other" or another checkbox');
           
           //if other checked and input is empty show alert
            else if(checkOther.is(':checked') && $('input[name="qual-form-other-form-2"]').val() == "")
            
               $('input[name="qual-form-other-form-2"]').addClass('empty'); 
                alert('Please specify other');
            
            else
            
               alert('Validation Succeeded'); 
            

        
        else
        
            alert('Please check atleast one checkbox');
        
    );
);

JSFiddle Demo