select all checkboxes while clicking on one checkbox

Question

So far i made a table. Every column has one checkbox. What i wanna do is when i click on the checkbox in the th every checkbox in the table gets selected. Does somebody know how to do that?

Here is my Code:

<table style="width:100%">
            <tr>
                <th><input class="checkbox" type="checkbox"></th>
                <th>Spieler</th>
                <th>Rang</th> 
                <th>Tage</th>
              </tr>
              <tr>
                <td><input class="checkbox" type="checkbox"></td>
                <td>HELLFIRE944</td>
                <td>Komandant</td> 
                <td>212</td>
              </tr>
              <tr>
                <td><input class="checkbox" type="checkbox"></td>
                <td>Backfischjoghurt</td>
                <td>Ausführender Offizier</td> 
                <td>217</td>
              </tr>
                <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>retoaba</td>
                    <td>Personaloffizier</td> 
                    <td>210</td>
                </tr>
               <tr>
                   <td><input class="checkbox"  type="checkbox"></td>
                    <td>chrisi_39</td>
                    <td>Rekrutierungsoffizier</td> 
                    <td>210</td>
               </tr>
                <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>salpo</td>
                    <td>Unteroffizier</td> 
                    <td>212</td>
               </tr>
                <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>Kaeltischerkriger</td>
                    <td>Unteroffizier</td> 
                    <td>213</td>
               </tr>
                <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>DnerYoo_sniper</td>
                    <td>Rekrut</td> 
                    <td>39</td>
               </tr>
              <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>panzerzockerundnoah</td>
                    <td>Rekrut</td> 
                    <td>146</td>
               </tr>
                <tr>
                    <td><input class="checkbox" type="checkbox"></td>
                    <td>PanzaSintKuhlMinecraftLP</td>
                    <td>Rekrut</td> 
                    <td>116</td>
               </tr>

Css:

th{
    color:white;
    text-align: left;
    width: 5px;
}
td {
    color:white;
}
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
    font-family: arial, sans-serif;
}
th, td {
    padding: 15px;
}
tr:nth-child(even) {
    background-color: #3A0505;
}

possible duplicate of http://stackoverflow.com/questions/386281/how-to-implement-select-all-check-box-in-html — Luke, Sep 10 '16 at 14:06
@Luke Sadly it does not work. I guess its because my app.js is not integrated the correct way. my app.js is in a folder called "scripts" and the page with the table is in a folder called "pages". I have integrated the js into the html like this: is that correct? — Sandro21, Sep 10 '16 at 19:39

R.K.Saini · Answer 1 · 2016-09-10T14:24:13.423

2

Try this.

$(document).on("change", "th .checkbox", function () {
    if ($(this).is(":checked"))
    {
        $("td .checkbox").prop('checked', true);
    }
    else
    {
        $("td .checkbox").prop('checked', false);
    }
})

Here is working example https://jsfiddle.net/p5pnj0u9/

edited Sep 10 '16 at 14:24

answered Sep 10 '16 at 14:16

R.K.Saini

2,678
1
18
25

Sadly it does not work. I guess its because my app.js is not integrated the correct way. my app.js is in a folder called "scripts" and the page with the table is in a folder called "pages". I have integrated the js into the html like this: is that correct? – Sandro21 Sep 10 '16 at 19:41
The way you add your aap.js file in your html will only work if your "pages" and "scripts" folder are in same folder. Also make sure that you have included the the jQuery before your app.js like this – R.K.Saini Sep 11 '16 at 04:14
I dont understand. Cant jquery and js be in one document? – Sandro21 Sep 11 '16 at 07:29
jQuery is a JavaScript library not a separate thing – R.K.Saini Sep 11 '16 at 08:23
@Sandro21....it works...alll you have to need to include jquery to your HTML..Add this line to your HTML tag before your script code " "...you can check the jsFiddle https://jsfiddle.net/p5pnj0u9/ – Abhishek T. Sep 11 '16 at 10:32
I always get this error in the browser. Failed to load resource: //ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js net::ERR_FILE_NOT_FOUND – Sandro21 Sep 12 '16 at 07:57
@Abhishek Tandon and i get this error: app.js:1 Uncaught ReferenceError: $ is not defined(anonymous function) @ app.js:1 – Sandro21 Sep 12 '16 at 08:07
@Sandro21 Try this prefix "https://" before ajax.googleapis.com/ajax/libs/jquery/2.0.3 Instead of . Or you can download jquery on your local system and then use from local file – R.K.Saini Sep 12 '16 at 08:19
Ahh the js is working the jquery isn't. I dont know why and i decided to do my webpage only with Javascript. I quess I can make the Checkbox function work in Javascript – Sandro21 Sep 12 '16 at 12:42
one question. This checkbox is in a table. In the same table i am also using Javascript. Is it possible that the jquery is not working because i used javascript in the same table? – Sandro21 Sep 12 '16 at 12:50
There is no conflict between jQuery and javascript, As jQuery is not a different thing its a library written in JavaScript. So can Just do some "google" about jquery :) – R.K.Saini Sep 12 '16 at 16:15

score 1 · Answer 2 · answered Sep 10 '16 at 14:13

You can give the first checkbox an onClick-Event that executes document.getElementById("checkbox").checked = true; on all the other ones. If you use jQuery 1.6+ you can use $("#checkbox").prop("checked", true);, all versions below use $("#checkbox").attr("checked", true);.

select all checkboxes while clicking on one checkbox

2 Answers2