按键批量操作示例

来源：cnblogs　　作者：螃蟹落翎沫　　时间：2019/10/12 9:19:00　　对本文有异议

<!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>

原文链接：http://www.cnblogs.com/njuwyx/p/11656442.html

友情链接：直通硅谷　点职佳　北美留学生论坛

jQuery热门文章

jQuery推荐文章