Форум

Synov_son · #1 (**permalink**) 07.11.2013, 01:56

Здравствуйте, помогите, пожалуйста.
Сделал в таблице первую колонку всю с чекбоксами так, что бы при отметке первого - в шапке, все остальные отмечались. В общем все работает. После подсоединил плагин TableSorter для возможности сортировки таблицы. Все работает, кроме того, что чекбокс верхний стал отмечать через один чекбоксы и при этом сортировать их странным образом (прикрепляю скриншот). В чем может быть дело ?
Вот код отметки всех чекбоксов

$('#select_all').change(function() {
		var checkboxes = $('input[type="checkbox"]');
		for (var i = 0; i < checkboxes.length; i++) {
			if(this.checked == true) {
				this.checked = false;
				checkboxes[i].checked = false;
			}
			else {
				this.checked = true;
            	checkboxes[i].checked = true;
			}
    	}
		return false;
	});

Ссылка на плагин
http://tablesorter.com/
Помогите, если можете, пожалуйста. Спасибо.

рони · #2 (**permalink**) 07.11.2013, 02:28

почему

Сообщение от Synov_son

change

и зачем строки 5 и 9 ?

Synov_son · #3 (**permalink**) 07.11.2013, 02:50

Что бы можно было не только отметить все, но и снять все отметки. 5 и 9 это снять/отметить.

BETEPAH · #4 (**permalink**) 07.11.2013, 02:52

change, видимо, чтоб действовало и при нажатии пробела на этом чекбоксе. А вообще много лишних телодвижений, имхо

<input type="checkbox" id="select_all" > select all
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script>
$('#select_all').change(function() {
	var isChek = this.checked;
	$('input:checkbox').each(function(){this.checked = isChek});
});
</script>

BETEPAH · #5 (**permalink**) 07.11.2013, 02:56

Сообщение от Synov_son

Что бы можно было не только отметить все, но и снять все отметки. 5 и 9 это снять/отметить.

Рони намекает, что если убрать return false, то 5я и 9я строки не нужны

Synov_son · #6 (**permalink**) 07.11.2013, 02:57

Так тоже делал, но так будет только отмечать.

Synov_son · #7 (**permalink**) 07.11.2013, 02:58

Я их уже убрал, и теперь все отмечаются, кроме

$('#select_all')

BETEPAH · #8 (**permalink**) 07.11.2013, 02:59

Сообщение от Synov_son

Так тоже делал, но так будет только отмечать.

как "так"?

рони · #9 (**permalink**) 07.11.2013, 03:01

Synov_son,

<!DOCTYPE HTML>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  #myTable{border:5px ridge #73766f;border-collapse:collapse}
  #myTable thead,th{background:-webkit-linear-gradient(top right,#b8b9b1,#fff);background:-moz-linear-gradient(top right,#b8b9b1,#fff);background:-o-linear-gradient(top right,#b8b9b1,#fff);background:-ms-linear-gradient(top right,#b8b9b1,#fff);text-align:center;vertical-align:text-top;padding:10px;border-bottom:3px ridge #73766f;border-left:1px solid #73766f;border-collapse:collapse}
  #myTable td,tr{text-align:left;vertical-align:text-top;padding:10px;border:1px solid #73766f;border-collapse:collapse;background:#fff}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.30.4/js/jquery.tablesorter.min.js"></script>
  <script>
  $(document)
     .ready(function () {
         $("#myTable")
             .tablesorter({
                 headers: {
                     0: {
                         sorter: false // запрет сортировки нулевой колонки средствами плагина
                     }
                 }
             });
         $('#select_all')
             .click(function (event) {
                 //event.stopPropagation()
                 var checkboxes = $('input[type="checkbox"]')
                     .not(this);
                 checkboxes.prop('checked', this.checked)
             });
     });
  </script>
</head>

<body>
  <table id="myTable"   >
<thead>
<tr>
    <th><input name="" type="checkbox" id="select_all"></th>
    <th>Фамилия</th>
    <th>Имя</th>
    <th>Email</th>
    <th>Платеж</th>
    <th>Сайт</th>
</tr>
</thead>
<tbody>
<tr>
    <td><input name="" type="checkbox"></td>
    <td>Иванов</td>
    <td>Петр</td>
    <td>ivanov@gmail.com</td>
    <td>$50.00</td>
    <td>http://www.ivanov.ua</td>
</tr>
<tr>
    <td><input name="" type="checkbox"></td>
    <td>Петров</td>
    <td>Иван</td>
    <td>petrov@yandex.ru</td>
    <td>$50.00</td>
    <td>http://www.petrov.com.ru</td>
</tr>
<tr>
    <td><input name="" type="checkbox"></td>
    <td>Сергеев</td>
    <td>Михаил</td>
    <td>sergeed@mail.ru</td>
    <td>$100.00</td>
    <td>http://www.sergeev.ru</td>
</tr>
<tr>
    <td><input name="" type="checkbox"></td>
    <td>Михайлов</td>
    <td>Потап</td>
    <td>medvedev@rambler.ru</td>
    <td>$50.00</td>
    <td>http://www.yandex.com</td>
</tr>
</tbody>
</table>
</body>

</html>

Synov_son · #10 (**permalink**) 07.11.2013, 03:01

так

.each(function(){this.checked = isChek})

Форум

Справочник

Discord чат

Курсы javascript