<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jianpan</title>
</head>
<body>
<table border="2">
<thead>
<th>option</th>
<th>name</th>
<th>hobby</th>
<th>operation</th>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>1</td>
<td><select>
<option value="1">online</option>
<option value="2">offline</option>
<option value="3">shutdown</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>1</td>
<td><select>
<option value="1">online</option>
<option value="2">offline</option>
<option value="3">shutdown</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>1</td>
<td><select>
<option value="1">online</option>
<option value="2">offline</option>
<option value="3">shutdown</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>1</td>
<td><select>
<option value="1">online</option>
<option value="2">offline</option>
<option value="3">shutdown</option>
</select></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>1</td>
<td>1</td>
<td><select>
<option value="1">online</option>
<option value="2">offline</option>
<option value="3">shutdown</option>
</select></td>
</tr>
</tbody>
</table>
<script src="jquery-3.4.1.js"></script>
<script>
var mode = false;
//先判断要求1按键是否按下
var $bodyEle = $('body');
$bodyEle.on('keydown',function (event) {
if(event.keyCode===17){
mode = true;
//进入批量操作模式
}
});
$bodyEle.on('keyup',function (event) {
if(event.keyCode===17){
mode = false;
}
});
$('select').on('change',function () {
//先获取当前SELECT的值
var value = $(this).val();
//找到CHECKBOX标签
var $thischenckbox = $(this).parent().siblings().first().find(':checkbox');
//判断checkbox是否被选中
if($thischenckbox.prop('checked') && mode){
//满足checkbox被选中与按键基本要求
//正式进入批量操作模式
var $checked = $("input[type='checkbox']:checked");
for(var i=0;i<$checked.length;i++){
$($checked[i]).parent().siblings().last().find("select").val(value);
}
}
})
</script>
</body>
</html>
按键批量操作示例
猜你喜欢
转载自www.cnblogs.com/njuwyx/p/11656442.html
今日推荐
周排行