如何在提交按钮时检查特定复选框的值?

问题描述:

我有两个div包含相同的复选框,具有相同的名称,类和id。当我选择特定div的复选框时,它应该在提交按钮时提醒该复选框的值。如何在提交按钮时检查特定复选框的值?

例子:

<div> 

    <input type="checkbox" class="snowplay" id="snowplayy" name="snowplay" value="1"> 
</div> 
<div> 

    <input type="checkbox" class="snowplay" id="snowplayy" name="snowplay" value="2"> 
</div> 
<div> 

    <input type="submit" class="submit" id="submit" name="submit" /> 
</div> 

当我点击任何两个复选框,然后提交按钮,我想提醒的是特定的复选框的复选框的值。任何人都可以说如何做到这一点?

+2

'ID应该是唯一的' – guradio

$('.submit').click(function(e) { 
 
    e.preventDefault() 
 
    //alert($('.snowplay:checked').val()) //single value 
 
    $('.snowplay:checked').each(function() {//iterate over 
 
    alert($(this).val()) // many value 
 

 
    }) 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 

 
    <input type="checkbox" class="snowplay" id="snowplayy" name="snowplay" value="1"> 
 
</div> 
 
<div> 
 

 
    <input type="checkbox" class="snowplay" id="snowplayy1" name="snowplay" value="2"> 
 

 
</div> 
 

 
<div> 
 

 
    <input type="submit" class="submit" id="submit" name="submit" /> 
 

 
</div>

  1. 使用此.snowplay:checked复选框带班snowplay被检查
  2. 更改您的ID是唯一的

ID必须是唯一的。所以在这里我删除了id属性:)。

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$('#submit').click(function(){ 
$('.snowplay:checked').each(function(){ 
alert($(this).val()) 
}); 

}); 

}); 
</script> 
</head> 
<body> 
<div> 

    <input type="checkbox" class="snowplay" name="snowplay" value="1"> 
</div> 
<div> 

    <input type="checkbox" class="snowplay" name="snowplay" value="2"> 
</div> 
<div> 

    <input type="submit" class="submit" id="submit" name="submit" /> 
</div> 

</body> 
</html>