<!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>
XHTMT|
HTML5|
CSS|
HTML DOM|
jQuery|
JSON|
AJAX|
LESS|
HTML|
Bootstrap|
Foundation|
AngularJS|
Ember.js|
TypeScript|
AngularJS2|
React|
jQuery UI|
jQuery EasyUI|
Node.js|
Highcharts|
Echarts|
Vue.js|
CoffeeScript|
Ext.js|
Meteor|
SASS|
Omi|
Markdown|
前端开发规范|
浏览器|
webpack|
JavaScript|
CSS3|
用户登录
还没有账号?立即注册
用户注册
投稿取消
文章分类: |
|
还能输入300字
上传中....