Jquery & checkbox
Здравствуйте !
Имеется таблица html в ней пять строк. В каждой строке две колонки. В первой колонке элемент input type=checkbox. Во второй колонке текст. Нужно при клике по всей строке определить выделен чекбокс или нет. Если не выделен то установить галочку, если выделен то снять галочку. Необходимо чтобы данное действие могло повторяться многократно. Моя реализация: Сразу в чём проблема - атрибут checked="checked" устанавливается и удаляется из input по кликам многократно. А сама галочка ОДНОКРАТНО ставиться и убирается, при повторном клике галочки нет, а атрибут есть. То есть галочка не ставится при многократных кликах, а атрибут ставится и убирается. Как сделать чтобы галочка ставилась? Пробовал в Firefox и Chrome.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
</head>
<body>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type=checkbox name="id" value="3603">
</td>
<td>name1</td>
</tr>
<tr>
<td>
<input type=checkbox name="id" value="3795">
</td>
<td>name2</td>
</tr>
<tr>
<td>
<input type=checkbox name="id" value="3796">
</td>
<td>name3</td>
</tr>
<tr>
<td>
<input type=checkbox name="id" value="3797">
</td>
<td>name4</td>
</tr>
<tr>
<td>
<input type=checkbox name="id" value="3798">
</td>
<td>name5</td>
</tr>
</tbody>
</table>
<!-- jQuery -->
<script src="jquery-2.1.4.min.js"></script>
<!-- Выбор чекбоксов -->
<script>
$(document).ready(function(){
$("table.table > tbody > tr").click(function(){
var tdFirst = $(this).children("td:first");
var inputCheckbox = $(tdFirst).find( $("input[type=checkbox]") );
if($(inputCheckbox).attr("checked") == "checked"){
$(inputCheckbox).removeAttr("checked");
}else{
$(inputCheckbox).attr("checked","checked");
};
});
});
</script>
</body>
</html>
|
if($(inputCheckbox).attr("checked") == "checked")... а если не "checked"? :)
и $(element).prop('checked', 1 или 0 соответственно), а не attr("checked","checked"); |
sergey144010,
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
</head>
<body>
<table class="table table-striped table-hover">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type=checkbox name="id" value="3603">
</td>
<td>name1</td>
</tr>
<tr>
<td>
<input type=checkbox name="id" value="3795">
</td>
<td>name2</td>
</tr>
<tr>
<td>
<input type=checkbox name="id" value="3796">
</td>
<td>name3</td>
</tr>
<tr>
<td>
<input type=checkbox name="id" value="3797">
</td>
<td>name4</td>
</tr>
<tr>
<td>
<input type=checkbox name="id" value="3798">
</td>
<td>name5</td>
</tr>
</tbody>
</table>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function() {
$("table.table > tbody > tr").each(function(indx, el) {
var inp = $("input:checkbox", el)[0];
$(el).on("click", function(event) {
event.target != inp && (inp.checked = !inp.checked)
})
})
});
</script>
</body>
</html>
|
Спасибо рони!
В этих четырёх строчках открыл для себя много нового! Как правильно прочитать следующую строку из кода: event.target != inp && (inp.checked = !inp.checked) Цель не равна input и свойству инпута checked присвоить противоположное ему на данный момент значение? Это альтернативный синтаксис if(){} ? |
sergey144010,
да |
| Часовой пояс GMT +3, время: 08:46. |