如何评估按钮的复选框状态单击jQuery

Question

应该是一个非常基本的概念，但由于某种原因，这给了我困难。这个问题应该从标题中具有很大的解释性。单击按钮时，我正在尝试获得状态。这是我引用的形式：

<form id="setupForm">
    <label>Name</label>
        <input type="text" name="Name"><br/>
    <label>Tag</label>
        <input type="text" name="Tag"><br/>
    <label>Choose Your Theme</label>
        <input type="radio" name="theme" value="1"> 1
        <input type="radio" name="theme" value="2"> 2
        <input type="radio" name="theme" value="3"> 3<br/>
    <label>Choose Your Pre-Built Pages</label>
        <input type="checkbox" name="page" value="About" checked>About Us
        <input type="checkbox" name="page" value="Contact" checked>Contact Us
        <input type="checkbox" name="page" value="Terms" checked>Terms of Service
        <input type="checkbox" name="page" value="Privacy" checked>Privacy Policy<br/>
    <label>Insert YouTube Embed Code (Not Required)</label>
        <input type="text" name="embed"><br/>
    <button id="proceedBtn" type="button">Proceed</button><br>
</form>

单击proceedBtn时，我需要检查并查看带有page名称的四个复选框中的哪个是或未检查。我试图在这里获得boolean响应。

我尝试过：

var sitePageAbout = $('input[name=pageAbout]');
if(sitePageAbout.prop('checked')){
    valueString += "true,";
}else{
    valueString += "false,";
    console.log(valueString);
}
//#2
var sitePageAbout = $('input[name=pageAbout]');
if(sitePageAbout.attr('checked')){
    valueString += "true,";
}else{
    valueString += "false,";
}
//#3
var sitePageAbout = $('input[name=pageAbout]');
if(sitePageAbout.is(':checked')){
    valueString += "true,";
}else{
    valueString += "false,";
}

他们都返回true

我也尝试过：

1. 从复选框中删除checked属性 ->返回的true。
2. 将checked值更改为false->返回的true

似乎它要么返回true或undefined ...有什么想法吗？谢谢。

Answer 1

$("#proceedBtn").click(function() {
  var valueString = '';
  $('input[name=page]').each(function(){
    if($(this).is(":checked")){
      console.log($(this).val() + '  is checked');
    }
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="setupForm">
  <label>Name</label>
  <input type="text" name="Name"><br/>
  <label>Tag</label>
  <input type="text" name="Tag"><br/>
  <label>Choose Your Theme</label>
  <input type="radio" name="theme" value="1"> 1
  <input type="radio" name="theme" value="2"> 2
  <input type="radio" name="theme" value="3"> 3<br/>
  <label>Choose Your Pre-Built Pages</label>
  <input type="checkbox" name="page" value="About" checked>About Us
  <input type="checkbox" name="page" value="Contact" checked>Contact Us
  <input type="checkbox" name="page" value="Terms" checked>Terms of Service
  <input type="checkbox" name="page" value="Privacy" checked>Privacy Policy<br/>
  <label>Insert YouTube Embed Code (Not Required)</label>
  <input type="text" name="embed"><br/>
  <button id="proceedBtn" type="button">Proceed</button><br>
</form>

Answer 2

希望您需要此：

$(document).ready(function(){
  $("#proceedBtn").click(function(){
  	 $('input[type=checkbox]').each(function(){
    if($(this).is(":checked")){
      console.log($(this).val() + '  is checked');
    }else{
      console.log($(this).val() + '  is not checked');
    }
  });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="setupForm">
<label>Name</label>
<input type="text" name="Name"><br/>
<label>Tag</label>
<input type="text" name="Tag"><br/>
<label>Choose Your Theme</label>
<input type="radio" name="theme" value="1"> 1
<input type="radio" name="theme" value="2"> 2
<input type="radio" name="theme" value="3"> 3<br/>
<label>Choose Your Pre-Built Pages</label>
<input type="checkbox" name="page" value="About" checked>About Us
<input type="checkbox" name="page" value="Contact" checked>Contact Us
<input type="checkbox" name="page" value="Terms" checked>Terms of Service
<input type="checkbox" name="page" value="Privacy" checked>Privacy Policy<br/>
<label>Insert YouTube Embed Code (Not Required)</label>
<input type="text" name="embed"><br/>
<button id="proceedBtn" type="button">Proceed</button><br>
</form>