2013-04-23 5 views
0

Я создал функцию для выбора всех флажка флажок с идентификатором SelectAll ..Добавление выбранного класса к ближайшему тр

<tr class=""> 
    <td width="5%" class="center"><input type="checkbox" onclick="" value="0" id="selectall" name="chkRecordId"></td> 
</tr> 

<tr id="row_21" class="even"> 
    <td class="center"><input type="checkbox" id="CategoryCheckIn" value="21" class="case" name="data[Category][checkIn][]"></td> 
</tr> 

<tr id="row_1" class="odd"> 
    <td class="center"><input type="checkbox" id="CategoryCheckIn" value="1" class="case" name="data[Category][checkIn][]"></td> 
</tr> 

Как это. Теперь я хочу добавить код, чтобы выбрать все флажки с классом .case вместе с этим добавлением класса к ближайшему tr 'selected'

Функция идет хорошо в случае выбора флажка. Но я смущен добавлением класса в tr. Хотя я пробовал, мой код здесь записан. Он не работает в случае добавления класса, если выбрано все нажатие.

$(function(){ 
$("#selectall").click(function() { 
    $('.case').attr('checked', this.checked).closest("tr").addClass("selected"); 
}); 

$(".case").click(function(){ 
    $(this).closest("tr").toggleClass("selected"); 
    if($(".case").length == $(".case:checked").length) { 
     $("#selectall").attr("checked", "checked"); 
    } else { 
     $("#selectall").removeAttr("checked"); 
    } 
}); 

$(".case:checked").each(function() { 
    $(this).closest("tr").addClass("selected"); 
}); 

}); 

У меня есть кнопки отправки с идентификатором «Отправить» Я хочу проверить, нажмите отправить, если какой-либо из checkbox.case проверяется еще вернуться ложным.

+0

Вы должны взглянуть на ['.prop()'] (http://api.jquery.com/prop/), если вы используете jQuery 1.6+ – andyb

ответ

1

Я хотел бы предложить следующее:

$('#selectall').change(function() { 
    var thisClosest = $(this).closest('tr'), 
     checked = this.checked; 
    // selecting the elements by class: 
    $('.case') 
    // setting the property (not the attribute) to be equal that of #selectall 
    .prop('checked', checked) 
    // finding the closest tr element of each of those check-boxes 
    .closest('tr') 
    // adding the closest tr of the #selectall element (cached earlier) 
    // then calls the addClass() or removeClass() methods depending on 
    // the #selectall being checked (addClass()) or unchecked (removeClass()) 
    .add(thisClosest)[checked ? 'addClass' : 'removeClass']('selected'); 
}); 

$('.case').change(function(){ 
    $(this).closest('tr')[this.checked ? 'addClass' : 'removeClass']('selected'); 
}); 

JS Fiddle demo.

выше обновлена ​​следующим образом:

$('#selectall').change(function() { 
    var thisClosest = $(this).closest('tr'), 
     checked = this.checked; 
    $('.case').prop('checked', checked).closest('tr').add(thisClosest)[checked ? 'addClass' : 'removeClass']('selected'); 
}); 

$('.case').change(function() { 
    var that = this, 
     $that = $(that), 
     checked = that.checked, 
     $selectall = $('#selectall'); 
    $that.closest('tr').add($selectall.closest('tr'))[checked ? 'addClass' : 'removeClass']('selected'); 
    $selectall.prop('checked', false); 
}); 

JS Fiddle demo.

В дополнение к первоначальному вопросу, о том, как проверить наличие .case элементов проверяется на представить:

$('form').submit(function(e){ 
    if (!$('.case:checked').length) { 
     return false; 
    } 
}); 

Ссылки:

+0

. Он не удаляет флажок, если флажок снят отдельно. , – Sankalp

+0

Я не осознал, что вам тоже нужен этот аспект, мои извинения. Ответ обновлен/отредактирован для включения. –

+0

@sankalp: теперь отредактирован, чтобы удалить флажок '# selectall', если элемент не отмечен (что похоже на желаемый ответ). –

0

Хотя мой код немного длинный, но я нашел для него идеальное решение.

$("#selectall").click(function() { 
    $('.case').attr('checked', this.checked); 
    if($('.case').prop('checked')) 
     $('.case').closest("tr").addClass("selected"); 
    else 
     $('.case').closest("tr").removeClass("selected"); 
}); 

$(".case").click(function(){ 
    $(this).closest("tr").toggleClass("selected"); 
    if($(".case").length == $(".case:checked").length) { 
     $("#selectall").attr("checked", "checked"); 
    } else { 
     $("#selectall").removeAttr("checked"); 
    } 
}); 

$(".case:checked").each(function() { 
    $(this).closest("tr").addClass("selected"); 
}); 

Это хорошо работает, но все же я смущен, чтобы проверить на отправке, если установлен один флажок или нет?

Смежные вопросы