常用JQUERY操作总结

【复选框操作】

<input type= "checkbox"  id= "checkbox_id01"  name= "checkbox_id"  value = "需要代买蔬菜" />需要代买蔬菜

<input type= "checkbox"  id= "checkbox_id02"  name= "checkbox_id"  value = "需要清洗餐具" />需要清洗餐具

 

1）改变选中checkbox时执行

$( '#checkbox_id' ).change( function  () {

     exe_function(); //函数

});

$( '#checkbox_id' ).click( function  () {

     exe_function(); //函数

});

2)循环取所有的checkbox的值

$( 'input[name="checkbox_id"]:checked' ).each( function  () {

     if  ($( this ).val() == "需要代买蔬菜" ) {

        sother_price1 = 50;

     }

     if  ($( this ).val() == "需要清洗餐具" ) {

        sother_price2 = 50;

     }

});

 

 

【单选按钮操作】

$( "input:radio[@name='radio_id']" ).change( function  () {

   //改变选择时执行代码

}

 

 

 

【输入框操作】

 

1）失去焦点

$( '#input_id' ).blur( function  () {

     //执行代码

});

 

2）取值/赋值

$( '#input_id' ).val();

$( '#input_id' ).val( "xxx" );

 

 

【下拉框操作】

//服务大类和小类选择列表

$(document).ready( function (){

     $( "#service_sml" ).append( "<select style='width:100px' name='service_smlTB'><option>住家保姆</option><option>不住家保姆</option><option>老人陪护</option><option>病人陪护</option></select>" );

     $( "#service_big" ).change( function  () {

 

               var  values = $( this ).val();

               if  (values == "保姆" ) {

                   $( "#service_sml" ).empty();

                   $( "#service_sml" ).append( "<select style='width:100px'><option>住家保姆</option><option>不住家保姆</option><option>老人陪护</option><option>病人陪护</option></select>" );

 

               }

               if  (values == "育儿" ) {

                   $( "#service_sml" ).empty();

                   $( "#service_sml" ).append( "<select style='width:100px'><option>月嫂</option><option>育儿嫂</option><option>产妇医院陪护</option></select>" );

               }

               

        });

 

});

 

//下拉框重新定位到默认的选项上,selectedIndex = 0 为第一项值

$( '#option_id' )[0].selectedIndex = 0;