<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jianpan</title></head><body><table border="2"> <thead> <th>option</th> <th>name</t ...
<!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>
