CODEWITHSUNDEEP
jqueryimagecheckboxhideshow
Ravi
Ravi

Reputation: 4075

jQuery show/hide images on checking checkboxes

I have a table like this, and i have a checkbox at each row and checkboxes on each column. So i want to show/hide an tick mark image next to data in each td when i check the checkbox in the row and table headers. And the tick mark should hide when i uncheck.

Demo of this: http://jsfiddle.net/MpzXU/3/

<table id="example">
      <thead>
        <tr>
          <th></h>
          <th>PO Number</th>
          <th>Hangtag<input type="checkbox" value="hangtag" class="ht_chkbx"/></th>
          <th>Care Label<input type="checkbox" value="Care Label" class="cl_chkbx"/></th>
          <th>UPC<input type="checkbox" value="UPC" class="upc_chkbx"/></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="checkbox2" id="checkbox2"></td>
          <td>6711112</td>
          <td>1</td>
          <td>20</td>
          <td>17</td>
        </tr>
      </tbody>
    </table>

Upvotes: 3

Views: 2623

Answers (3)

GMO
GMO

Reputation: 669

JSFiddle Demo (edited to match comments)

I change the color of the text on checkbox change by adding a class. For each i check if both corresponding checkboxes (line and column) are unchecked before removing the class.

HTML

<table id="example">
<thead>
    <tr>
        <th></th>
        <th>A <input type="checkbox" /></th>
        <th>B <input type="checkbox" /></th>
        <th>C <input type="checkbox" /></th>
        <th>D <input type="checkbox" /></th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1 <input type="checkbox"></td>
        <td>A1</td>
        <td>A2</td>
        <td>A3</td>
        <td>A4</td>
    </tr>
    <tr>
        <td>2 <input type="checkbox"></td>
        <td>B1</td>
        <td>B2</td>
        <td>B3</td>
        <td>B4</td>
    </tr>
    <tr>
         <td>3 <input type="checkbox"></td>
         <td>C1</td>
         <td>C2</td>
         <td>C3</td>
         <td>C4</td>
     </tr>
 </tbody>

jQuery

var headers = $('#example th');
$(':checkbox', '#example').change(function(e){
    var isChecked = $(this).is(':checked');
    if( $(this).closest('thead').length ){ //columns checkboxes
        //getting the column index
        var i = headers.index( $(this).parent() );

        $('tbody tr', '#example').each(function(){
            var isLineChecked = $(':checkbox:checked', this).length;

            if( isChecked && isLineChecked  ){
                $(this).find('td:eq('+i+')').addClass('selected');
            } else {
                $(this).find('td:eq('+i+')').removeClass('selected');
            }
        });

    } else { //line checkbox   
        var columnsCheckboxes = $(':checkbox', headers);

        $(this).parent().siblings().each(function(i, td){
            if( isChecked && columnsCheckboxes.eq(i).is(':checked') ){
                $(this).addClass('selected');
            } else {
                $(this).removeClass('selected');
            }
        });
    }
});

Upvotes: 1

Carls Jr.
Carls Jr.

Reputation: 3078

This is the best answer that I could give you. Please check...

http://jsfiddle.net/MpzXU/9/

Hope this helps :)

Upvotes: 0

mattsven
mattsven

Reputation: 23253

You would use something like this:

//Monitor the main checkbox ( $("#macDaddyCheckbox") ) for changes 
$("#macDaddyCheckbox").change(function(){
    if($(this).is(":checked")){
        //It is checked, so hide the other checkboxes
        $(".babyCheckboxes").hide();
    } else {
        //It is not chceked, so show the other checkboxes
        $(".babyCheckboxes").show();
    }
});

EDIT:

var myImg = $("#myImg");

$("#checkBoxAtTheRow").change(function(){
    if($(this).is(":checked")){ myImg.hide(); } else { myImg.show(); }
});

$(".tableHeaderCheckBoxes").change(function(){
    if($(this).is(":checked")){ $(".babyCheckboxes").hide(); } else { $(".babyCheckboxes").show(); }
});

Upvotes: 2

Related Questions