如何评估按钮上复选框的状态单击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

希望你需要这个：

$(document).ready(function(){ 
 
    $("#proceedBtn").click(function(){ 
 
    \t $('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>

Answer 2

$("#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>