Показать сообщение отдельно
  #4 (permalink)  
Старый 20.08.2017, 14:29
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,816

Black_Star, https://jsfiddle.net/t7p9cfy5/
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>

</head>
<body>
<table>
  <tr>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key" checked></th>
  </tr>
  <tr>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
  </tr>
  <tr>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
  </tr>
  <tr>
    <th><input type="checkbox" name="key" class="key" checked></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
    <th><input type="checkbox" name="key" class="key"></th>
  </tr>
</table>


<script>
$('.key').change(function(e){
	e.preventDefault();//Отключаю смену состояния чекбокса, сделаю это сам
  
	var $this=$(this),
  		$table=$this.parents('table'),
      index=$this.parents('th').index(),//Номер столбца
      change_property=function(){
        var $t=$(this);
	      $t.prop('checked',!$t.prop('checked'));
      };

  $this.parents('tr').find('[type="checkbox"]').each(change_property);
  $table.find('tr').each(function(){
  	$(this).find('th').eq(index).find('[type="checkbox"]').each(change_property);
  });
});
</script>
</body>
</html>
Ответить с цитированием