效果展示
第一種需求,點擊input的時候,input的value發生改變
$('.group-wrapper input').click(function(){
$(this).val(0); //如果上面input的默認value是1,這樣就可以在點擊的時候變成0
});
第二種需求,input手動添加上選中的狀態,也是要改變input的value
$('.group-wrapper input').click(function(){
var status = $(this).prop('checked'); //獲取當前input的狀態,看是不是選中的狀態
var val = status === true ? 1 : 0; //三元表達式判斷input的值,選中為1.不選中為0,賦值給一個val的變量
$(this).val(val); //改變input的val
});
第三種情況,用form表單提交的時候,input沒有選中的話提交不過去
$('.group-wrapper input').click(function(){
var status = $(this).prop('checked');
var val = status === true ? 1 : 0;
$(this).val(val);
});
$('.btn-primary').click(function(){ //給確定下載的按鈕添加點擊事件
$('.group-wrapper input').each(function(){ //找到所有的input遍歷它,
if(!this.checked){
this.checked = true; //判斷當前input的選中狀態,沒有選中的話,讓他選中。
}
});
}); //這樣的話就是,前面的方法是選中不選中 設置為0或1,但是又由於沒選中的話form提交不過去,所以就再寫一個事件,沒選中的話讓他選中。
第四種情況,點擊確定下載,將input的name和value拼接起來
效果展示
//確定下載
$('.btn-primary').click(function(){
var inputs=$('.group-wrapper').find('input'); //找到所有的input
var _arr=''; //聲明一個空的字符串
for (var i = 0; i < inputs.length; i++) { //循環遍歷所有找到的input
var inputname=inputs[i].name; //將當前的input的name屬性賦給一個變量
if(inputs[i].checked){ //判斷當前input的選中狀態
_arr += inputname + '=1&'; //選中的情況下拼接到上面聲明的空的字符串上值 等於1
}else{
_arr += inputname + '=0&' //沒有選中的情況下也拼接到上面聲明的空的字符串上值等於0
}
}
console.log(_arr.slice(0,-1)); //截取的原因是,末尾多了一個&符號
var result = _arr.slice(0,-1);
});