CODEWITHSUNDEEP
javascript
David
David

Reputation: 224

Select all checkboxes - but only ones with the same table cell value

Hopefully I can explain this without overcomplicating the issue, so please bear with me. I already know how to write some JavaScript to select all check boxes within a form, but how would you go about doing the following?

Here is the code:

<tr>
    <td>
        <input type="checkbox" name="array[]" value="value1"/>
    </td>
    <td>
        Some Field
    </td>
    <td>
        Bob
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="array[]" value="value2"/>
    </td>
    <td>
        Some Field
    </td>
    <td>
        Bob
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="array[]" value="value3"/>
    </td>
    <td>
        Some Field
    </td>
    <td>
        Fred
    </td>
</tr>
<tr>
    <td>
        <input type="checkbox" name="array[]" value="value4"/>
    </td>
    <td>
        Some Field
    </td>
    <td>
        Jack
    </td>
</tr>

I want to be able to select/unselect all the checkboxes relevant to "Bob", but not Jack or Fred. The common data must be contained within a TD element. Is this even possible?

If someone could help that would be fantastic!

Many thanks for your reply subhaze but I'm not having much luck getting it to work, here is my code now:

function selectBOB() {
    var trs = document.getElementsByTagName('tr');
    for( var i = 0; i < trs.length; i++ ) {
        var tds = trs[i].getElementsByTagName('td');
        for( var k = 0; k < tds.length; k++ ) {
            if( tds[k].innerText == 'Bob' ) {
                trs[i].getElementsByTagName('input')[0].checked = 'checked'; 
            }  
        }
    }
}

<input type="checkbox" name="sAll" onclick="selectBOB(this)" /> Select Bob

Upvotes: 0

Views: 1062

Answers (1)

subhaze
subhaze

Reputation: 8855

This isn't a super flexible solution since it relies on your markup to stay in that format but might get you headed in the right direction.

Live example

HTML

<input id="select" type="checkbox" data-name="Bob" onClick="setChecks(this)"  /><label>Select all Bobs </label><br />
<input id="select" type="checkbox" data-name="Fred" onclick="setChecks(this)" /><label>Select all Freds </label><br /><br />
<table id="myTable" >
    <tbody>
        <tr>
            <td>
                <input type="checkbox" name="array[]" value="value1" />
            </td>
            <td>Some Field</td>
            <td>Bob</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="array[]" value="value2" />
            </td>
            <td>Some Field</td>
            <td>Bob</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="array[]" value="value3" />
            </td>
            <td>Some Field</td>
            <td>Fred</td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" name="array[]" value="value4" />
            </td>
            <td>Some Field</td>
            <td>Jack</td>
        </tr>
    </tbody>
</table>

JavaScript

function setChecks( checkboxElem ) {
    var trs = document.getElementById('myTable').getElementsByTagName('tr');
    for( var i = 0; i < trs.length; i++ ) {
        var tds = trs[i].getElementsByTagName('td');
        for( var k = 0; k < tds.length; k++ ) {
            if( tds[k].innerText == checkboxElem.getAttribute('data-name') 
                || tds[k].textContent == checkboxElem.getAttribute('data-name')) {

                trs[i].getElementsByTagName('input')[0].checked = checkboxElem.checked;
            }  
        }
    }
}

Upvotes: 2

Related Questions