Я пытаюсь добавить многократный флажок в таблице.
и это код.
HTML
<HTML>
<HEAD>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<TITLE>Multiple Checkbox Select/Deselect - DEMO</TITLE>
</HEAD>
<BODY>
<H2>Multiple Checkbox Select/Deselect - DEMO</H2>
<table border="1">
<tr>
<th><input type="checkbox" id="selectall"/></th>
<th>Cell phone</th>
<th>Rating</th>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="1"/></td>
<td>BlackBerry Bold 9650</td>
<td>2/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="2"/></td>
<td>Samsung Galaxy</td>
<td>3.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="3"/></td>
<td>Droid X</td>
<td>4.5/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="4"/></td>
<td>HTC Desire</td>
<td>3/5</td>
</tr>
<tr>
<td align="center"><input type="checkbox" class="case" name="case" value="5"/></td>
<td>Apple iPhone 4</td>
<td>5/5</td>
</tr>
</table>
</BODY>
</HTML>
JQuery
<SCRIPT language="javascript">
$(function(){
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</SCRIPT>
ОК это прекрасно работает, но проблема в том, что я собираюсь сделать, это не статическая таблица.
он запрашивает и отвечает и динамически добавляет таблицу.
и если строки добавлены так. он не обрабатывает событие.
Любая хорошая идея?
Вы должны использовать делегирование событий
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').prop('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(document).on('click', ".case", function () {
$("#selectall").prop("checked", $(".case:not(:checked)").length == 0);
});
Демо: скрипка
Также используйте .prop(), чтобы установить проверенное состояние
JQuery поддерживает событие делегирования, как это:
$(document.body).on('click', '.case', function(){
});
Используйте функцию.on(). Примеры могут быть основаны на http://api.jquery.com/on/