如何使用 JQuery 获取表单中复选框的 value 属性？答案

【问题标题】：How to use JQuery to get the value property of a checkbox in a form?如何使用 JQuery 获取表单中复选框的 value 属性？
【发布时间】：2018-07-21 15:36:48
【问题描述】：

我想在选中复选框时使用 Javascript 或 JQuery 来获取复选框的值。

我该怎么做？请看下面 JQuery 代码中的问号。

<html>
<body>

<form id="toggleForm" action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

<script>
$('**???**').on('**checked???**', function(){
   var checkedValue = $(this).attr('**value???**');
   console.log("The checkbox value property is "+checkedValue);
});
</script>

</body>
</html>

（请注意，我的问题与其他问题不重复，因为在其他问题中，复选框有一个类，并且代码正在使用它们的类来抓取它们。在我的问题中，我的复选框没有类. 我如何在没有类或 ID 的情况下获取它们？？如何检查它们的值？检查它们时调用的事件是什么？请参阅上面我尝试中的问号。）

【问题讨论】：

也许你需要 radiobutton 而不是 checkbox ？
像var checkedValue = $(this).val();一样使用.val()
stackoverflow.com/questions/426258/… 可能重复。
jQuery Learning Center
Setting "checked" for a checkbox with jQuery?的可能重复

标签： javascript jquery forms checkbox

【解决方案1】：

$(document).on('change','input:checkbox',function(){
var value=$(this).val();
if($(this).is(':checked')){
alert(value+" selected");
}
else{
alert(value+" unselected");}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>

<form id="toggleForm" action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

</body>
</html>

【讨论】：

【解决方案2】：

使用.val()

$(':checkbox').on('change', function() {

  var checkedValue = $(this).val();
  console.log("The checkbox value property is " + checkedValue);


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggleForm" action="">
  <input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
  <input type="checkbox" name="vehicle" value="Car">I have a car
</form>

【讨论】：

【解决方案3】：

$(document).ready(function(){
$('input:checkbox').change(function(){
($(this).prop("checked") == true) ? 
console.log($(this).val()+ " " +"checked"):console.log($(this).val()+ " " +"unchecked")
})
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="toggleForm" action="">
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

【讨论】：