jquery checkbox多选的用法及异步使用的问题
2014-07-03 10:08:43 阿炯
功能需求：在页面中通过多外checkbox来选择多个值，通过ajax异步方式来提交到后台处理。

方式一：将取得的多个值map为一字串，在提交。

$('.btnadd').click(function(){
 var rs = $('input[name=numbers]:checked').map(function(){
  return $(this).val();
}).get();

$.ajax({
 url: 'loadmore.php',
 type: 'post',
 data: { ids: rs },
 success:function(data){ }
});

方式二：将取得的多个值存入在数组中，在提交。

<form>
<input type='checkbox' name='uids[]' value='1'id='checkbox_1' />
<input type='checkbox' name='uids[]' value='2'id='checkbox_2' />
<input type='checkbox' name='uids[]' value='3'id='checkbox_3' />
<input name="confirm" type="button" value="confirm" onclick="submit_form();" />
</form>

使用post方法提交:
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });

将结果存入到数组中：
var data = { 'uids[]':[]};
$(":checked").each(function() {
  data['uids[]'].push($(this).val());
});
$.post("ajax.php", data);

或这样写：
$("input:checked").each(function() {
 data['venue[]'].push($(this).val());
});

或这样写：
var data = new Array();
$("input[name='checkBoxesName']:checked").each(function(i) {
 data.push($(this).val());
});


$(document).ready(function () {
$("#btnSubmit").click(function(){
 var freeoa = new Array();
 $('input[name="language"]:checked').each(function() {
 freeoa.push(this.value);
});
 alert("Number of selected Languages: "+freeoa.length+"\n"+"And, they are: "+freeoa);
});
});

下面将对选择的checkbox进行判断，当没有checkbox被选到时，不能提交。
$(document).ready(function() {
 $('input:checkbox').click(function() {
 //set our checkedcount variable to 0
 var checkedCount = 0;
 //loop through and count the number of "checked" boxes
 $('input:checkbox:checked').each(function() {
 //if a checked box was found, increase checkedCount by 1
  checkedCount++;
 });
 //if checkedCount is still zero, disable submit button.
 if (checkedCount == 0){
  $('#submitButton').attr('disabled', 'disabled');
 }//if checkCount is not 0, enable the submit button
 else{
  $('#submitButton').removeAttr('disabled');
 }
 });
});

或这样写：
$(document).ready(function() {
 $('input:checkbox').click(function() {
 var buttonsChecked = $('input:checkbox:checked');
 if (buttonsChecked.length) {
  $('#submitButton').removeAttr('disabled');
 }else{
  $('#submitButton').attr('disabled', 'disabled');
 }
 });
});

上面所说的是如何取得checkbox的值，并提交的问题，下面记录了在使用过程与ajax异步提交的问题：发现在提交后，后端的程序不能取到通过post方法过去的checkbox的值，而手动运行后端程序是没有问题。分析后发现最大的可能：在ajax提交时，取checkbox的值的运算还没有完成，所以就只会有提交动作而没有提交数据。因此只能修改下传参的方式了。

function loading(){
 $('#rs').html('<img src="loading.gif"/>');
}

$("#submit").click(function(){
 var host_cnt=0;
 $('#rs').empty();//将现有清空
 $('input:checkbox:checked').each(function(){
  host_cnt++;
  //alert($(this).val());
 });

 if(host_cnt == 0){
  $("#submit").attr('disabled',true);
 }else{
  $("#submit").attr('disabled',false);
 }

 var freeoa = $('input:checkbox:checked').map(function(){
  return $(this).val();
 }).get();

 $.ajax({
  url: '/hd.json?ids='+freeoa,
  type: 'post',
  //data: eval( { ids : freeoa } ),
  beforeSend:loading,//执行ajax前执行loading函数.直到success
  success: function(data){
   //alert('将要重下面编号的虚拟机：'+data);
   $('#rs').html('<div>'+data+'</div>');
  },
  error: function(data){
   alert(data);
  }
 });

 return false;
});

使用'data:{ }'方式，在异步提交方式不能实现，只有直接传参了。