如何验证是否在jquery ajax .prop fumction（）中选中了复选框？

Question

我的网站上有一个复选框，正在使用php进行验证，并在页面加载的同一页面中提交。 需要使用adajax post方法来禁用页面加载，但无法验证复选框。

我尝试了jquery $(elem).prop("checked")，但没有成功

$(document).ready(function(){
$('#load-image').hide();
    $('#ik_kvkk').prop('checked');
    $("form").submit(function(event){
        event.preventDefault();
        $('#load-image').show();
            $('input[type=checkbox]').prop('checked');
        var ik_name =$("#ik_name").val();
        var ik_kvkk =$("#ik_kvkk").val();
        var captcha =$("#captcha").val();
        var submit =$("#submit").val();
        $(".form-message").load("forms/comment_add.php",{   
            ik_name:          ik_name,  
            ik_kvkk:          ik_kvkk,  
            captcha:          captcha,
            submit:           submit
        },function() {
            $('#load-image').hide();
        });
    });
});

Referans .prop()

这是我的原始代码：

$(document).ready(function(){
$('#load-image').hide();
	$("form").submit(function(event){
		event.preventDefault();
		$('#load-image').show();
        $('input[type=checkbox]').prop('checked');
		var ik_name =$("#ik_name").val();
		var ik_kvkk =$("#ik_kvkk").val();
		var captcha =$("#captcha").val();
		var submit =$("#submit").val();
		$(".form-message").load("forms/comment_add.php",{	
			ik_name:          ik_name,	
			ik_kvkk:          ik_kvkk,	
			captcha:          captcha,
			submit:           submit
		},function() {
			$('#load-image').hide();
		});
	});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

> Validating part and added total codes

<script>
$("#ik_name,#ik_kvkk, #captcha").removeClass("input-error");
	if(errorEmpty == true){
		$("#ik_name,#ik_kvkk, #captcha").addClass("input-error");
	}
	if(errorEmail == true){
		$("#ik_email").addClass("input-error");
	}
	if(!$('input[type=checkbox]').prop('checked')) {
	 $('#ik_kvkk').val("").show();
	}
	if(errorEmpty == false && errorEmail == false){
		$("#ik_name,#ik_kvkk, #captcha").val("");
	}
   /* 
	if(errorCheckbox == true){
	 $('#ik_kvkk').addClass("input-error");
	} */
  </script>
<form>
  <input type="text" id="ik_name" name="ik_name"><br>
  <input type="text" id="captcha" name="captcha"><br>
  <input type="checkbox" id="ik_kvkk" name="ik_kvkk"><br>
  <button type="submit" id="submit" name="submit">Submit</button>
</form>
<p class="form-message"></p>

感谢您的帮助

Answer 1

如果选中，它将返回true，如果未选中，则返回false：

$('input[type=checkbox]').prop('checked');

因此，您可以处理是否关闭AJAX或在屏幕上抛出验证错误。

编辑：

if(!$('input[type=checkbox]').prop('checked')) {
    //If not checked, updated error message element with message and display
   $('#errorMessageElement').val("Checkbox is not check or whatever error message").show();
}

查看此代码段并根据需要进行调整：

$(document).ready(function(){
$('#load-image').hide();
    $('#ik_kvkk').prop('checked');
    $("form").submit(function(event){
        event.preventDefault();
        $("#ik_name,#ik_kvkk, #captcha").removeClass("input-error");
        $('.form-message').hide();
        $('#load-image').show();
        
        var is_checked = $('input[type=checkbox]').prop('checked');
        var ik_name =$("#ik_name").val();
        var ik_kvkk =$("#ik_kvkk").val();
        var captcha =$("#captcha").val();
        var submit =$("#submit").val();
        var can_submit = true;
              
        
        
	if(!ik_name){
    $('.form-message').val("ERROR").show();
		$("#ik_name,#ik_kvkk, #captcha").addClass("input-error");
   can_submit = false;
	}
  
	if(!ik_kvkk){
    $('.form-message').val("ERROR").show();
		$("#ik_email").addClass("input-error");
   can_submit = false;
	}
  
  if(!captcha){
    $('.form-message').val("ERROR").show();
		$("#captcha").addClass("input-error");
   can_submit = false;
	}
  
	if(!is_checked) {
	 $('.form-message').val("ERROR").show();
   $("#ik_kvkk").addClass("input-error");
   can_submit = false;
	}  
          
      if(can_submit) {
         console.log("Can submit");
      //$(".form-message").load("forms/comment_add.php",{   
          //  ik_name:          ik_name,  
           // ik_kvkk:          ik_kvkk,  
           // captcha:          captcha,
          //  submit:           submit
       // },function() {
       //     $('#load-image').hide();
      //  });       
        //
      } else {
         console.log("Validation Error");
      }
      }); 
});

.input-error {
background: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" id="ik_name" name="ik_name"><br>
  <input type="text" id="captcha" name="captcha"><br>
  <input type="checkbox" id="ik_kvkk" name="ik_kvkk"><br>
  <button type="submit" id="submit" name="submit">Submit</button>
</form>
<p class="form-message" style="display:none;">ERROR</p>