JQuery with HTML get and set multiple CheckBox

From CoderLearner
Jump to: navigation, search

Description

Multiple checkbox, get and assign multiple checkbox.

Example 1

  • Form and checkbox

<form id="f100" name="f100" url="myselect_sex.php">
  <input type="checkbox" name="sex" id="sex1041" value="1041"/> 
  <input type="checkbox" name="sex" id="sex1042" value="1042"/> 
  <input type="checkbox" name="sex" id="sex1043" value="1043"/> 
  <input type="checkbox" name="sex" id="sex1044" value="1044"/> 
  <input type="checkbox" name="sex" id="sex1045" value="1045"/> 
</form>

  • Ajax form submit
$().ready(function(){

      var C_URL = 'home.php';

      $('#f100').validate({    
            submitHandler: function() {
                var CURRENT_URL = $('#f100').attr('url');
                var URL_AJAX = '/eec/'+CURRENT_URL+'?a=save';
                
                var aa_sex = $('input:checkbox:checked[name="sex"]').map(function () 
                 { return this.value;}).get().join(','); 
			
                var gstring = 'g_sex='+aa_sex;
                
         
                $.ajax({
                    url:URL_AJAX,
                    data:gstring,
                    dataType:'JSON',
                    type:'POST',
                    success: function (data) {
                        if ( data.code =="1") {
                            window.location =C_URL;
                        }
                    }
                });
            }
        });  
});
  • JQuery Validation
  • This requires to include the jquery validation plugin.
  • Validate the form submit before saving the form data to the server side script.
$('#f100').validate({    
            submitHandler: function() { }
});

  • Get user checked checkbox
  • This makes a list of checkbox as a string join by ,'.
  • The aa_sex = '1041,1042,1043'
  • It is based on the user selected checkbox.
 var aa_sex = $('input:checkbox:checked[name="sex"]').map(function () {
                    return this.value;}).get().join(','); 
			
  • Ajax function
  • This part we pass the form data by using Ajax.
 $.ajax({
                    url:URL_AJAX,
                    data:gstring,
                    dataType:'JSON',
                    type:'POST',
                    success: function (data) {
                        if ( data.code =="1") {
                            window.location =C_URL;
                        }
                    }
                });

Assign checkbox value

Get the JSON data and assign the value back to the HTML form.

  • This is when we want to display the form or update the checkbox by passing the data from the server side script back to the form.

$().ready(function(){

    var url ='/eec/myselect_sex.php';
    $.post(url,
    {
        a:'get'
    }
    ,function(data){
        if(data.code=='1')
        {
            var d_sex = data.content.g_sex.split(',');
     
            for(var i2 =0; i2 < d_sex.length; i2++) {
                tmp_name = '#sex'+d_sex[i2];
                var cb_f1 = $(tmp_name);
                if(cb_f1.attr('value')==d_sex[i2]) {
                    cb_f1.attr('checked','checked');
                }
            }
        }
    },'json');
  
  
});
  • check valid data
if(data.code=='1')
        {

        }
  • split the string to array
  • g_set='1041,1042,1044';
  • result: d_sex=['1041','1042','1044'];
       var d_sex = data.content.g_sex.split(',');
       

Loop through the value and assign it to the checkbox in the form.

   for(var i2 =0; i2 < d_sex.length; i2++) {
                tmp_name = '#sex'+d_sex[i2];
                var cb_f1 = $(tmp_name);
                if(cb_f1.attr('value')==d_sex[i2]) {
                    cb_f1.attr('checked','checked');
                }
            }
  • Basic php script that use in this example, this script generate the JSON data.
  • This script is not a completed script.
       if(!empty($uid)) {
                $ema = new sex_selection();
                $ema->uid = $uid;
                $result = $ema->get();

                $r['code'] = 1;
                $r['content'] = $result;

                echo json_encode($r);
       }