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

时间:2018-02-11 09:14:22

标签: javascript jquery forms checkbox

我想使用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的情况下抓住他们?我如何检查他们的价值?检查时要求的事件是什么?请在上面的尝试中查看问号。)

3 个答案:

答案 0 :(得分:1)

  1. 使用.val()
  2. $(':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>

答案 1 :(得分:1)

&#13;
&#13;
$(document).on('change','input:checkbox',function(){
var value=$(this).val();
if($(this).is(':checked')){
alert(value+" selected");
}
else{
alert(value+" unselected");}
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 2 :(得分:0)

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