CODEWITHSUNDEEP
jquery
Sankalp
Sankalp

Reputation: 1350

Adding selected class to the closest tr

I have created a function for selecting all checkbox on checkbox with id 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>

Like this. Now I want to add code to select all checkbox with class .case along with that add class to the closest tr 'selected'

Function is going well in case of checkbox select. But I am confused in adding class to tr. Though I have tried my code here is written down. It fails in case of addClass if select all is clicked.

$(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");
});

});

I have submit button with id 'submit' I wanna check on submit click if any of checkbox.case is checked else return false.

Upvotes: 0

Views: 3776

Answers (2)

David Thomas
David Thomas

Reputation: 253358

I'd suggest the following:

$('#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.

The above updated to the following:

$('#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.

Further to your original question, as to how to check for any .case elements being checked on submit:

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

References:

Upvotes: 1

Sankalp
Sankalp

Reputation: 1350

Though my code is bit long but I have found perfect solution for it.

$("#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");
});

It works well but still I am confused to verify on submit if single checkbox is checked or not ?

Upvotes: 0

Related Questions