如何評估按鈕上覆選框的狀態單擊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>