jQuery nested checkbox in table

Question

HTML Table's:

/* one table */
    <table class="table borderless" id="cegadatok">
        <tr class="info">
            <td width="5%"><input type="checkbox" class="checkAll" value="89"></td>
            <td width="25%">Company name</td>
            <td width="20%">Email address</td>
            <td width="35%">Address </td>
            <td width="15%">Tax numver</td>
        </tr>
    </table>
    <table class="table borderless" id="tetelek" style="width: 90%;" align="right">
        <tr>
            <td width="5%"><input type="checkbox" value="1"></td>
            <td class="warning">1</td>
            <td class="warning">2</td>
            <td class="warning">3</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="2"></td>
            <td class="warning">4</td>
            <td class="warning">5</td>
            <td class="warning">6</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="3"></td>
            <td class="warning">7</td>
            <td class="warning">8</td>
            <td class="warning">9</td>
        </tr>

    </table>

    /* Two table */
    <table class="table borderless" id="cegadatok">
        <tr class="info">
            <td width="5%"><input type="checkbox" class="checkAll" value="90"></td>
            <td width="25%">Company name</td>
            <td width="20%">Email address</td>
            <td width="35%">Address </td>
            <td width="15%">Tax numver</td>
        </tr>
    </table>
    <table class="table borderless" id="tetelek" style="width: 90%;" align="right">
        <tr>
            <td width="5%"><input type="checkbox" value="1"></td>
            <td class="warning">1</td>
            <td class="warning">2</td>
            <td class="warning">3</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="2"></td>
            <td class="warning">4</td>
            <td class="warning">5</td>
            <td class="warning">6</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="3"></td>
            <td class="warning">7</td>
            <td class="warning">8</td>
            <td class="warning">9</td>
        </tr>

    </table>
    /* Etc tables ... */

jQuery code:

    $( document ).ready(function() {

        $(".checkAll").click(function(e){
            $(this).closest('tr').attr('class', 'success');
            if(!this.checked){
                $(this).closest('tr').attr('class', 'info');
            }
            $('#tetelek').find('td input:checkbox').prop('checked', this.checked);
            $('#tetelek').find('td').prop('class', 'success');
        });


    });

I would like to create a sample invoice generator systems. If I click to checkbox id's 'checkAll', the jquery put 'selected' checkbox in id="tetelek" table. And over the click, I would like to set td class: active (from bootstrap). So, example.

Thank you!

Jamiec · Accepted Answer · 2014-11-27 16:48:23Z

The only thing you're missing is the last line should be:

 $('#tetelek').find('td').toggleClass('active',this.checked);

$(".checkAll").click(function(e){
  $(this).closest('tr').attr('class', 'success');
  if(!this.checked){
    $(this).closest('tr').attr('class', 'info');
  }
  $('#tetelek').find('td input:checkbox').prop('checked', this.checked);
  $('#tetelek').find('td').toggleClass('active',this.checked);
});

td.active{
  background:green
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table borderless" id="cegadatok">
        <tr class="info">
            <td width="5%"><input type="checkbox" class="checkAll" value="89"></td>
            <td width="25%">Company name</td>
            <td width="20%">Email address</td>
            <td width="35%">Address </td>
            <td width="15%">Tax numver</td>
        </tr>
    </table>
    <table class="table borderless" id="tetelek" style="width: 90%;" align="right">
        <tr>
            <td width="5%"><input type="checkbox" value="1"></td>
            <td class="warning">1</td>
            <td class="warning">2</td>
            <td class="warning">3</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="2"></td>
            <td class="warning">4</td>
            <td class="warning">5</td>
            <td class="warning">6</td>
        </tr>
        <tr>
            <td width="5%"><input type="checkbox" value="3"></td>
            <td class="warning">7</td>
            <td class="warning">8</td>
            <td class="warning">9</td>
        </tr>

    </table>

Thank you, Jamiec! Code works well! How edit jQuery code, if I would like more tables, example: more than 100... ? Thanks!

werdf02 · Accepted Answer · 2014-11-28 16:12:47Z

<table class="table table-hover" >
    <tr class="active">
        <td width="5%"><input type="checkbox" class="checkAll" value="89"></td>
        <td width="25%">Company name 1</td>
        <td width="20%">Email address 1</td>
        <td width="35%">Address 1</td>
        <td width="15%">Tax numver 1</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="1"></td>
        <td class="active">1</td>
        <td class="active">2</td>
        <td class="active">3</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="2"></td>
        <td class="active">4</td>
        <td class="active">5</td>
        <td class="active">6</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="3"></td>
        <td class="active">7</td>
        <td class="active">8</td>
        <td class="active">9</td>
    </tr>
    <tr class="active">
        <td width="5%"><input type="checkbox" class="checkAll" value="89"></td>
        <td width="25%">Company name 2</td>
        <td width="20%">Email address 2</td>
        <td width="35%">Address 2</td>
        <td width="15%">Tax numver 2</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="1"></td>
        <td class="active">1</td>
        <td class="active">2</td>
        <td class="active">3</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="2"></td>
        <td class="active">4</td>
        <td class="active">5</td>
        <td class="active">6</td>
    </tr>
    <tr>
        <td></td>
        <td class="active" width="5%"><input type="checkbox" value="3"></td>
        <td class="active">7</td>
        <td class="active">8</td>
        <td class="active">9</td>
    </tr>
</table>

During, I need modify tables structure. The essential the first version. When I click the company tr, it's under checkbox will ckeck. Thanks.

Collectives™ on Stack Overflow

jQuery nested checkbox in table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related