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);