[英]how to pass values of several checkboxes with jquery ajax
要從多個復選框中獲取值,我使用以下代碼:
<form class="myform" method="post" action="">
<input type="checkbox" class="checkbox" value="11" /><br>
<input type="checkbox" class="checkbox" value="22" /><br>
<input type="submit" value="Go" />
</form>
ajax:
$(document).ready(function(){
$('.myform').on('submit', function(e){
//Stop the form from submitting itself to the server.
e.preventDefault();
var checkboxvalue = $('.checkbox').val();
$.ajax({
type: "POST",
url: '',
data: {checkboxvalue: checkboxvalue},
success: function(data){
$('.response').html(data);
}
});
});
});
PHP:
if($_SERVER['REQUEST_METHOD'] == "POST") {
$value = false;
if(isset($_POST['checkboxvalue'])){
$value = $_POST['checkboxvalue'];
}
echo 'The value was: ' . $value;
exit;
}
問題是:當檢查第二個復選框時,我得到值11
,這是第一個復選框的值。 單擊兩個復選框時,我也得到值11
我想要實現的目標:如果我檢查第一個復選框,het應該給我11
作為輸出。 檢查第二個復選框,他應輸出22
作為值。 檢查兩個復選框時,他應輸出11
和22
作為值。
我怎樣才能實現這一目標?
用這個
$(document).ready(function(){
$('.myform').on('submit', function(e){
e.preventDefault();
var checkboxvalue = [];
$("input[type=checkbox]:checked").each(function(i){
checkboxvalue.push( i.value );
});
$.ajax({
type: "POST",
url: '',
data: {checkboxvalue: checkboxvalue},
success: function(data){
$('.response').html(data);
}
});
});
});
php
if($_SERVER['REQUEST_METHOD'] == "POST") {
$value = false;
/* the check box value in array*/
print_r($_POST['checkboxvalue']);
if(isset($_POST['checkboxvalue'])){
$value = $_POST['checkboxvalue'];
}
exit;
}
您需要添加name屬性才能檢查
<input type="checkbox" class="checkbox" name="value-check" value="11" /><br>
var checkboxvalue = [];
$.each($("input[name='value-check']:checked"), function(){
checkboxvalue.push($(this).val());
});
您需要loop through
選中的復選框,代碼問題是始終為您提供第一個選中復選框的值
var chkArray = []; $(".checkbox:checked").each(function() { chkArray.push($(this).val()); }); var selected; selected = chkArray.join(',') ; console.log(selected)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> <div><input type="checkbox" value="1" class="checkbox"> Value 1</div> <div><input type="checkbox" value="2" class="checkbox" checked="checked"> Value 2</div> <div><input type="checkbox" value="3" class="checkbox"> Value 3</div> <div><input type="checkbox" value="4" class="checkbox"checked="checked"> Value 4</div> <div><input type="checkbox" value="5" class="checkbox"> Value 5</div>
如果選中了復選框,則需要創建數組並填充值。
$(document).ready(function(){
$('.myform').on('submit', function(e){
//Stop the form from submitting itself to the server.
e.preventDefault();
var values = [];
$('.checkbox').each(function() {
if ($(this).is(':checked')) {
values.push($(this).val());
}
});
console.log(values);
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.