Check and uncheck all the check boxes and perform action using drop down menu

Question

In my table i have a column for a checkbox, when a user ticks that it should select all other check boxes underneath and if i click it again then the function deselect all the check boxes. I have also added drop down menu so if a user ticks a first box and selects add option then it should invoke some ajax method. This is what i have done:

 var ajReq = new XMLHttpRequest();
    $(document).ready(function () { Table();});

function Table(data) {
        var DisplayTable = '<table><tr><th>Name</th><th>Name2</th><th><input type="checkbox" id="SelectCheckbox"/></th></tr>';
        var counts= 0;
        for (var getdata in data) {
            var row = '<tr class=\'row\'select=\'' + data[getdata ].ID+ '\'</tr>';

            counts+= '<td>' + data[getdata].Name+ '</td>';
            counts+= '<td>' + data[getdata].Name2+ '</td>'


            counts+= '<td><input type="checkbox" class="SomeAjaxMethod" methd-DoSomething= "' + data[getdata ].ID+'"></td>'

            counts++;
            DisplayTable += counts;
        }
  table += '</table></div>';
        $('#DisplayTable').html(DisplayTable ); }

        <div id="DisplayTable"></div>

$(function () {
        $("#SelectCheckbox").click(function () {
            $(".SomeAjaxMethod").attr('checked', this.checked);
        });

        $(".SomeAjaxMethod").click(function () {
            if (this.checked == false) {
                $("#SelectCheckbox").attr('checked', false);
            }
        });
    });

When i add a Breakpoint to #SelectCheckBox it gets executed when a page is load, it should be executing after i selected a checkbox. I am also using drop down menu to perform some action, how do i attach check box to drop down menu, for example after selecting all the staff i want to delete them, i have already wrote SQL delete statment i just want to know how to i link check box with my drop down menu. this is my drop down menu:

<div class="dropdown">
    <div class="btn-group">
        <button type="button" id="id1" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            Select...
  <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a class="Delete-staff">Attended Detention</a></li>
            <li><a class="Edit-Staff">Letter Sent</a></li>
        </ul>
    </div>
</div>

[heck checkbox checked property using jQuery](http://stackoverflow.com/q/901712/1267304) — DontVoteMeDown, Jan 15 '14 at 11:34

score 0 · Accepted Answer · answered Jan 15 '14 at 13:09

0

Add a CSS class to the column with the checkboxes. Then use jQuery to check/uncheck every checkbox at the same time. Your HTML should look like this:

<table id="myTable">
    <tr><th>Name</th><th>Name2</th><th><input type="checkbox" 
        id="SelectCheckbox"/></th></tr>
    <tr>
        <td>Name1 from row 1</td>
        <td>Name2 from row 1</td>
        <td class="check"><input type="checkbox" class="SomeAjaxMethod"
            onclick="method_DoSomething('id-from-row-1')"></td>
    </tr>
    ... (more rows
</table>

And your JavaScript like this:

function checkUncheckEverything() {
    var isChecked = $('#SelectCheckbox').is(':checked');
    $('#myTable > tbody > tr > td.check > input').prop('checked', isChecked);
}
$('#SelectCheckbox').on('click', checkUncheckEverything);

answered Jan 15 '14 at 13:09

David

943
1
10
26

I want to avoid using HTML, i am building my table through JavaScript. – Jan 15 '14 at 13:36
@user3195896 I was thinking you could rewrite your JavaScript to output the HTML like in my example. I'm being lazy... – David Jan 15 '14 at 15:28
I have tried it, but it does not work , can i have a id in a table as shown in my question and pass it on to checkUncheckEverything function. Because i tried adding a id on my table and ran a simple onclick function which alerts something. but when i click on that check-box no alerts appears. Dont know why? – Jan 16 '14 at 08:24
I don't understand what you're trying to say. Please make a example using [jsfiddle](http://jsfiddle.net/) or [http://htmledit.squarefree.com/](http://htmledit.squarefree.com/) so I can test it. – David Jan 16 '14 at 14:25
(http://jsfiddle.net/Y5pDF/#&togetherjs=SIbVbxSTLS) from this you can see i am creating a table and one of a column is a check box when you click on that checkbox. My system should alert a message for that i have given a id as SelectCheckbox to my check box and passing it on to a onclick function, but its not working. I neveer used jfiddle but this is the best i could do. this answer is not related to my question but it can help me solve the problem. – Jan 17 '14 at 15:30
If this example helped you, consider marking the question as answered. – David Jan 21 '14 at 21:36

Check and uncheck all the check boxes and perform action using drop down menu

1 Answers1