Question 55712 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript alert the rest of the row content using a checkbox

I have code currently where I can output the value inside the selected checkboxes:

<button name="save_multicheckbox" class="btn-primary" onClick="getCheckbox()">Save Checkbox</button>


function getCheckbox() {
    var checks = document.getElementsByClassName('checks');
    var id_value = '';

    for ( i=0; i<4; i++) {
        if (checks[i].checked === true){
            id_value += checks[i].value + " ";
            title_value += checks_title[i].value + " ";

        }
    }

    alert(id_value);
}


            <?php foreach($result as $res){
                    ?><tr>
                        <td><h6><?php echo $res->id_num; ?></h6></td>
                        <td><h6 class="checks-title"><?php echo $res->title; ?></h6></td>
                        <td id="h-center" class="checks-type">
                            <?php if ($res->eh_type == 'post') {
                                     echo '<h6 id="color-p">POST</h6>'; 
                                  } else if ($res->eh_type == 'tribe_events') { 
                                     echo '<h6 id="color-e">EVENT</h6>'; }
                            ?>
                        </td>
                        <td id="h-center"><h6 class="checks-date"><?php echo $res->eh_date; ?></h6></td>
                        <td><h6 class="checks-url"><a href="https://ioc-westpac.org/event/training-on-coral-larval-reseeding/"><?php echo $res->slug; ?></a></h6></td>
                        <td id="h-center"><input type="checkbox" class="checks" name="ckb" value ="<?php echo $res->id_num; ?>" onclick="chkcontrol(<?php echo $res->chkbox_num; ?>)"></td>
                    </tr>
                    <?php
                } ?>

as you can see below, the getCheckbox() function works when I get the value from the checkbox (output with alert)

1

what I want to do now is to also output the rest of the row info using still using the getCheckbox() function, what can I add?

Tags:

2

Answers


  1. 0

    Do DOM traversal. Get parent-element (row) for those children having checkbox checked. And using the parent element you can get content specific to that row.

    <!DOCTYPE html>
<html>

<body>
    <div id="container">
        <div class="row">
            <input type="checkbox" class="checkbox-class" value="C1" />
            <div class="content">Content 1</div>
        </div>
        <div class="row">
            <input type="checkbox" class="checkbox-class" value="C2" />
            <div class="content">Content 2</div>
        </div>
    </div>
    <script>
        var childElement = document.querySelectorAll('#row .checkbox-class');
        childElement.forEach(nodeElement => {
            if (nodeElement.checked) {
                console.log(nodeElement.parentElement.getElementsByClassName("content")[0].innerHTML);
            }
        });
    </script>
</body>

</html>
    Login or Signup to reply.
  2. 0

    You can modify the getCheckbox() function to retrieve the text content of the other cells in the same row as the selected checkboxes. You can use the closest() method to find the closest parent tr element, and then use querySelector() to get the text content of the desired cells.

    function getCheckbox() {
    var checks = document.getElementsByClassName('checks');
    var id_value = '';
    var title_value = '';
    var type_value = '';
    var date_value = '';
    var url_value = '';

    for (i = 0; i < checks.length; i++) {
        if (checks[i].checked === true) {
            var row = checks[i].closest('tr');
            id_value += checks[i].value + " ";
            title_value += row.querySelector('.checks-title').textContent + " ";
            type_value += row.querySelector('.checks-type h6').textContent + " ";
            date_value += row.querySelector('.checks-date').textContent + " ";
            url_value += row.querySelector('.checks-url a').getAttribute('href') + " ";
        }
    }

    alert("ID: " + id_value + "nTitle: " + title_value + "nType: " + type_value + "nDate: " + date_value + "nURL: " + url_value);
}

    Now, when you call the getCheckbox() function, it will alert the text content of the other cells in the same row as the selected checkboxes, along with the checkbox value.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search