CODEWITHSUNDEEP
javascriptjquerycheckboxinputhtml-table
Yogi_Bear
Yogi_Bear

Reputation: 594

How to hide table row has unchecked input using jquery

I'm trying to do a filter that when a button pressed it will show only the row has checked input in the table.

<table class="table">
    <tr>
        <th>Name</th>
        <th>InUse</th>
        <th></th>
    </tr>
    <tr>
        <td>foo 1</td>
        <td>
            <input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
        </td>
        <td>
            <a href="/AdditivesNames/Edit/5">Edit</a> |
            <a href="/AdditivesNames/Details/5">Details</a> |
            <a href="/AdditivesNames/Delete/5">Delete</a>
        </td>
    </tr>
    <tr>
        <td>foo 2</td>
        <td>
            <input checked="checked" class="check-box" disabled="disabled" type="checkbox" />
        </td>
        <td>
            <a href="/AdditivesNames/Edit/3">Edit</a> |
            <a href="/AdditivesNames/Details/3">Details</a> |
            <a href="/AdditivesNames/Delete/3">Delete</a>
        </td>
    <tr/>
    <!-- not checked -->
    <tr>
        <td>foo 3</td>
        <td>
            <input class="check-box" disabled="disabled" type="checkbox" />
        </td>
        <td>
            <a href="/AdditivesNames/Edit/5">Edit</a> |
            <a href="/AdditivesNames/Details/5">Details</a> |
            <a href="/AdditivesNames/Delete/5">Delete</a>
        </td>
    </tr>
</table>

Upvotes: 1

Views: 2127

Answers (4)

james
james

Reputation: 51

This is a much simpler approach. Pass this to the onclick() event handler in your HTML and use jQuery:

<input type="checkbox" onClick="disablerow(this);">

function disablerow(el) {
    if (el.checked == true) {
        $(el).closest('tr').find(":input:text(:first)").attr('disabled', false);
    }
    else {
        $(el).closest('tr').find(":input:text(:first)").attr('disabled', true);
    }     
}

Upvotes: 0

Naveen Chandra Tiwari
Naveen Chandra Tiwari

Reputation: 5123

Please use jquery and place this code in your tag

  $(document).ready(function () {
    $("#btnClick").on("click", function () {
        $(".table tr").each(function () {
            if (!$(this).find("td input:checkbox").is(":checked")) {
                $(this).hide();
            }
        })
    })
});

This should work with your case.

Upvotes: 0

Rahul Patel
Rahul Patel

Reputation: 5246

Please use following jquery code. Onclick of submit button all the rows with unchecked checkboxes will be hide. 

$(document).ready(function(){
    $("input[type=submit]").click(function () {
        $("input:not(:checked)").each(function () {
            $(this).closest('tr').hide();           
        });
    });
});

Upvotes: 0

Mohammad
Mohammad

Reputation: 21489

You can use :has selector or .has() method to checking existence of element in parent.

$("button").click(function(){
    $("table tr").has(".check-box:not(:checked)").hide();
});
table, tr, td {
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <th>Name</th>
        <th>InUse</th>
    </tr>
    <tr>
        <td>foo 1</td>
        <td>
            <input class="check-box" type="checkbox" checked disabled  />
        </td>
    </tr>
    <tr>
        <td>foo 2</td>                  
        <td>
            <input class="check-box" type="checkbox" disabled  />
        </td>
    </tr>
    <tr>
        <td>foo 3</td>                  
        <td>
            <input class="check-box" type="checkbox" checked disabled  />
        </td>
    </tr>
    <tr>
        <td>foo 4</td>                  
        <td>
            <input class="check-box" type="checkbox" disabled  />
        </td>
    </tr>
</table>
<button>Only checked</button>

You can test code on full of you html in demo

Upvotes: 2

Related Questions