20.08.2017, 13:21
|
 |
Профессор
|
|
Регистрация: 11.07.2016
Сообщений: 300
|
|
|
Работа с checkbox в таблицах
Добрый день уважаемые. Встала такая задача, как по нажатию на флажок в ячейке таблици сделать так, что б свое состояние меняли на противоположное все другие флажки по вертикали и по горизонтали относительно этого? Приведу пример что б было понятнее
<!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-й выключен. Как организовать правильную выборку ?
|
|
20.08.2017, 13:32
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
$(".key").on("change", function(){
$(this).closest('tr').find(':checkbox').not(this).prop('checked', function() {
return !this.checked
});
});
|
|
20.08.2017, 13:54
|
|
Профессор
|
|
Регистрация: 11.07.2016
Сообщений: 300
|
|
Сообщение от laimas
|
$(".key").on("change", function(){
$(this).closest('tr').find(':checkbox').not(this).prop('checked', function() {
return !this.checked
});
});
|
По горизонтали меняет, а вот по столбцам чёт нет. |
|
20.08.2017, 14:29
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
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>
|
|
20.08.2017, 14:30
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
Black_Star,
<!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>
var thAll = $("th");
$(".key").on("click", function() {
var th = this.parentNode,
i = th.cellIndex,
tr = th.parentNode;
thAll.filter(function() {
return this.cellIndex == i || this.parentNode == tr
}).find(":checkbox").not(this).prop("checked", function() {
return !this.checked
});
if (thAll.length == thAll.find("input:checked").length) alert("YOU WON!!!")
});
</script>
</body>
</html>
|
|
20.08.2017, 14:34
|
|
Профессор
|
|
Регистрация: 11.07.2016
Сообщений: 300
|
|
 Всем спасибо за помощь |
|
20.08.2017, 14:40
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
|
Сообщение от рони
|
|
if (thAll.length == thAll.find("input:checked").length) alert("YOU WON!!!")
|
Получилось выиграть?))
По-моему это нереально.
Upd. Реально, только что убедился.
Последний раз редактировалось Nexus, 20.08.2017 в 14:44.
|
|
20.08.2017, 14:53
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,105
|
|
|
Сообщение от Nexus
|
|
Получилось выиграть?))
|
где то в инете есть алгоритм как выиграть, даже думать не надо, если знаешь его. |
|
20.08.2017, 14:55
|
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,791
|
|
|
Сообщение от рони
|
|
где то в инете есть алгоритм как выиграть, даже думать не надо, если знаешь его.
|
Так не интересно, да и без алгоритма думать не особо нужно, тыкай и когда-нибудь победишь. |
|
20.08.2017, 15:13
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
|
Сообщение от Black_Star
|
|
По горизонтали меняет, а вот по столбцам чёт нет.
|
$(".key").on("change", function(){
var o = $(this), t = o.closest('tr'), e = t.find(':checkbox'), i = e.index(o);
e.not(o).add($.map(t.siblings(), function(e) {
return $(e).find(':checkbox').eq(i)[0]
})).prop('checked', function() {
return !this.checked
});
});
|
|
|
|
