Добрый день уважаемые. Встала такая задача, как по нажатию на флажок в ячейке таблици сделать так, что б свое состояние меняли на противоположное все другие флажки по вертикали и по горизонтали относительно этого? Приведу пример что б было понятнее
<!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").on("click", function(){
console.log("key");
});
</script>
</body>
</html>
Как по нажатию на первый чекбокс, сделать так что б в первом ряду были включены 123 а 4-й был выключен и при этом в первом столбце 123 были включены а 4-й выключен. Как организовать правильную выборку ?