Home>

Currently, I am writing a program that displays the checked value of a checkbox using an HTML form and a JavaScript array.
For example, source code.

If i check the check box in the displayed name/email address line and press the register button,
The email address of the checked member is inside the element specified by id (forTo in this case),
It is now displayed together in HTML format.

However, I also want to be able to get email addresses for all specific groups at once, not for individuals.
Below the line for each person's name/email address (or under the script tag that includes intoTbody for code),
Placed a row and checkbox for each "everyone".

If i check this "Everyone" checkbox and press the register button,
To display the group's addresses together in the id element (instead of "○○ all")
How do I need to modify the code?

If anyone knows, I'm sorry, but please answer.

It is assumed that such a data table will be provided and managed.

Corresponding source code
<! DOCTYPE html><html><head><meta charset = "UTF-8"><meta name = "viewport" content = "width = device-width, initial-scale = 1.0"><script type = "text/javascript" src = "http://code.jquery.com/jquery-2.2.3.min.js"></script><title>MailGroupSet</title></head><body><form name = "destModal"><table border = "1">    <thead>      <tr>        <th>Selection</th>        <th>Name</th>        <th>Email address</th>      </tr>    </header>    <tbody><script>              function into Tbody (name, mail, group) {
                    document.write (
                        "<tr>" +
                            "<td>" +
                                "<input type ='checkbox' name ='destMember' value ='"+ mail + "'>" +
                            "</td>" +
                            "<td>" + name + "/ group:" + group + "</td>" +
                            "<td>" + mail + "</td>" +
                        "</tr>"
                    );
                }
                intoTbody ("Tokugawa Yoshinobu", "[email protected]", 0);
                intoTbody ("Naosuke Ii", "[email protected]", 0);
                intoTbody ("Katsu Kaishu", "[email protected]", 0);
                intoTbody ("Kondo Isami", "[email protected]", 0);
                intoTbody ("Hijikata Toshizo", "[email protected]", 0);
                intoTbody ("Takamori Saigo", "saigo.takamori`satsuma.com", 1);
                intoTbody ("Yoshida Shoin", "[email protected]", 1);
                intoTbody ("Kogoro Katsura", "[email protected]", 1);
                intoTbody ("Shinsaku Takasugi", "[email protected]", 1);
                intoTbody ("Ryoma Sakamoto", "[email protected]", 2);
                intoTbody ("Shintaro Nakaoka", "[email protected]", 2);
                intoTbody ("Goto Shojiro", "[email protected]", 2);
          </script>        <tr>            <td>                <input type = "checkbox" name = "destMember">            </td>            <td colspan = "2">Everyone in the Shogunate</td>        </tr>        <tr>            <td>                <input type = "checkbox" name = "destMember">            </td><td colspan = "2">All Satsumacho</td>        </tr>        <tr>            <td>                <input type = "checkbox" name = "destMember">            </td>            <td colspan = "2">Everyone else</td>        </tr>    </tbody></table></form><button onClick = "joinAddress ()">Register</button><script>  function joinAddress () {
            var arr1 = [];
            var to1 = document.destModal.destMember;
            for (let i = 0;i<to1.length;i ++) {
                Same as if (to1 [i] .checked) {// (to1 [i] .checked === true)
                    arr1.push ("<span class ='each" + (i + 1) + "eachAdressTx'>" + to1 [i] .value + "</span>");
                }
            }
            document.getElementById ("forTo"). innerHTML = arr1;
    }</script></body></html>
What I tried

Please describe here what you have tried for the problem.

Set name or class for each "Everyone" checkbox
In the if statement, if the registration button is pressed with the check box checked,
Check the line of the person corresponding to the class set for each group,
I also thought that it might be registered in that state.
(I don't know how to write the code, so it's not implemented yet ...)

  • Answer # 1

    I kept the original code as much as possible.

    <! DOCTYPE html>
    <html lang = "en">
    <head>
      <meta charset = "UTF-8">
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script type = "text/javascript" src = "http://code.jquery.com/jquery-2.2.3.min.js"></script>
      <title>MailGroupSet</title>
    </head>
    <body>
      <form name = "destModal">
          <table border = "1">
              <thead>
                  <tr>
                      <th>Selection</th>
                      <th>Name</th>
                      <th>Email address</th>
                  </tr>
              </header>
              <tbody>
                  <script>
                        function into Tbody (name, mail, group) {
                            document.write (
                                "<tr>" +
                                "<td>" +
                                "<input type ='checkbox' name ='destMember' value ='" + mail + `'data-group =" ${group} ">` +
                                "</td>" +
                                "<td>" + name + "/ group:" + group + "</td>" +
                                "<td>" + mail + "</td>" +
                                "</tr>"
                            );
                        }
                        intoTbody ("Tokugawa Yoshinobu", "[email protected]", 0);
                        intoTbody ("Naosuke Ii", "[email protected]", 0);
                        intoTbody ("Katsu Kaishu", "[email protected]", 0);
                        intoTbody ("Kondo Isami", "[email protected]", 0);
                        intoTbody ("Hijikata Toshizo", "[email protected]", 0);
                        intoTbody ("Takamori Saigo", "saigo.takamori`satsuma.com", 1);
                        intoTbody ("Yoshida Shoin", "[email protected]", 1);
                        intoTbody ("Kogoro Katsura", "[email protected]", 1);
                        intoTbody ("Shinsaku Takasugi", "[email protected]", 1);
                        intoTbody ("Ryoma Sakamoto", "[email protected]", 2);
                        intoTbody ("Shintaro Nakaoka", "[email protected]", 2);
                        intoTbody ("Goto Shojiro", "[email protected]", 2);
                  </script>
                  <tr>
                      <td>
                          <input type = "checkbox" name = "destMember" data-group = "0">
                      </td>
                      <td colspan = "2">Everyone in the Shogunate</td>
                  </tr>
                  <tr>
                      <td>
                          <input type = "checkbox" name = "destMember" data-group = "1">
                      </td>
                      <td colspan = "2">All Satsumacho</td>
                  </tr>
                  <tr>
                      <td>
                          <input type = "checkbox" name = "destMember" data-group = "2">
                      </td>
                      <td colspan = "2">Everyone else</td>
                  </tr>
              </tbody>
          </table>
      </form>
      <button onClick = "joinAddress ()">Register</button>
      <p id = "forTo"></p>
      <script>
            function joinAddress () {
                var arr1 = [];
                var to1 = document.destModal.destMember;
                for (let i = 0;i<to1.length;i ++) {
                    Same as if (to1 [i] .checked) {// (to1 [i] .checked === true)
                        arr1.push ("<span class ='each" + (i + 1) + "eachAdressTx'>" + to1 [i] .value + "</span>");
                    }
                }
                document.getElementById ("forTo"). innerHTML = arr1;
            }
            for (const item of document.getElementsByClassName ("group")) {
                item.addEventListener ("change", () =>{
                    const targetValue = item.attributes ["data-group"] .value;
                    for (const checkBox of document.destModal.destMember) {
                        checkBox.checked = checkBox.attributes ["data-group"] .value === targetValue;
                    }
                });
            }
      </script>
    </body>
    </html>

Related articles