如何评估按钮单击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>