如何使用 JQuery 获取表单中复选框的 value 属性?
Posted
技术标签:
【中文标题】如何使用 JQuery 获取表单中复选框的 value 属性?【英文标题】:How to use JQuery to get the value property of a checkbox in a form? 【发布时间】: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()
***.com/questions/426258/… 可能重复。
jQuery Learning Center
Setting "checked" for a checkbox with jQuery?的可能重复
【参考方案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>
【讨论】:
以上是关于如何使用 JQuery 获取表单中复选框的 value 属性?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 jQuery 获取复选框的值并将它们吐到不同的表单字段中