checkbox 和 select 常用操作

1.需求: 实现checkbox的 全选 和 取消全选

实现:

// “checkOrCancelAll” 为控制全选的checkbox 的id

$("#checkOrCancelAll").click(function(){

//jQuery 选择器,选择name=id 的所有checkbox,将它们的状态和”checkOrCancelAll”设置一致

$(":checkbox[name='id']").prop("checked",this.checked);

});

2.需求: 当checkbox 全部选中时,将全选checkbox选中

实现:

//给每个checkbox 注册下面点击事件,

//当 选中的checkbox长度 和 checkbox总数相等时,将全选checkbox 选中

function controlFirstCheckbox(){

$("#checkOrCancelAll").prop("checked",$(":checkbox[name='id']").length==$(":checkbox[name='id']:checked").length);

}

3.需求: 当点击提交或者跳转时,检查选中的checkbox,能且只能选中一个

封装一个js工具类

实现:

function JsUtil(){}

//给js中的类动态的扩展属性或者方法

JsUtil.prototype.selectSingleCheckbox = function(path){

var checkedElts = $(":checkbox[name='id']:checked");

if(checkedElts.length==0){

$("#message").text("请选择记录");

}else if(checkedElts.length>1){

$("#message").text("只能选择一条记录");

}else{

window.location.href = path+"?id="+checkedElts.val();

}

};

//在该js文件被加载的时候实例化对象

jsUtil = new JsUtil();

 

1).在项目中使用时,先导入js工具类. 

2).jsUtil.selectSingleCheckbox("提交路径");

 

4.需求: 将select中选中的option 移动到另一个select中

     //$("option:selected","#需要移动的select的id”).appendTo("#目标select的id”);

     //a.appendTo(b); 是将a追加到b上

 实现:

$("option:selected","#"+src).appendTo("#"+dest);