欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

按键批量操作示例

程序员文章站 2022-04-15 08:56:24
jianpan
option name
<!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>