CODEWITHSUNDEEP
jqueryhtmlcsscheckbox
lala
lala

Reputation: 151

checkbox css/jquery style change

The purpose of my codes is to change the <td> portion of the color and the font inside the table when I check/unchecked the box, but it didn't work as intended with the code I got from here.

input[type=checkbox] + td {
    background-color: #FFFFFF;
    color:#000000
} 

input[type=checkbox]:checked + td {
    background-color: #00447C;
    color:#FFFFFF;
} 
<div id="details">
    <div class="container">
        <p>Example</p>
        <table id="table">
          <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element1</td>
            <td>detail1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element2</td>
            <td>detail2</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element3</td>
            <td>detail3</td>
          </tr>
        </table>
        <button class="button">Reset</button>
    </div>  
</div>

It works in the source so I am confused regarding this.

Upvotes: 2

Views: 1828

Answers (4)

A. L
A. L

Reputation: 12639

With jquery you can do something like this:

var checkboxes = $("input[type='checkbox']");

function checkbox_function()
{
/*
  var tr = $(this).parent().parent();
  if ($(tr).hasClass('checked'))
  {
    $(tr).removeClass("checked");
  }
  else
  {
    $(tr).addClass("checked");
  }
*/
  var parent = $(this).parent();
  if ($(this).is(":checked"))
  {
    $(parent).siblings().addClass("checked");
  }
  else
  {
    $(parent).siblings().removeClass("checked");
  }
  
  
}

$.each(checkboxes, function(index, item) {
    $(item).change(checkbox_function);
  });
tr.unchecked {
    background-color: #FFFFFF;
    color:#000000
} 

tr.checked {
    background-color: #00447C;
    color:#FFFFFF;
}

td{
    background-color: #FFFFFF;
    color:#000000  
}

td.checked{
    background-color: #00447C;
    color:#FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="details">
    <div class="container">
        <p>Example</p>
        <table id="table">
          <tr>
            <th></th>
            <th>Header 1</th>
            <th>Header 2</th>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element1</td>
            <td>detail1</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element2</td>
            <td>detail2</td>
          </tr>
          <tr>
            <td> <input type="checkbox"/></td>
            <td>element3</td>
            <td>detail3</td>
          </tr>
        </table>
        <button class="button">Reset</button>
    </div>  
</div>

What this does is get all the checkboxes and then puts a change listener onto them.

(Edit to your liking).

Upvotes: 1

Rik Lewis
Rik Lewis

Reputation: 749

The plus (+) refers to siblings, but your checkbox is a child of the cell, so you should use chevron (>) or space ( ) instead.

http://techbrij.com/css-selector-adjacent-child-sibling

However, you can't style the parent based on the child, only the other way round. So you might have to resort to javascript to add/remove a class from the cell.

Upvotes: 0

Omiga
Omiga

Reputation: 581

the plus sign in css means :

Select and style every

element that are placed immediately after elements for div + p { background:'#fff'; }

That mean in your case it will select any td that comes right after input[..]

Upvotes: 0

comesuccingfuccslot
comesuccingfuccslot

Reputation: 717

The + selector in CSS selects an element adjacent to the preceding selector. So input + td would select the <td> in the following example:

<input />
<td></td>

But not in this one:

<div>
    <input />
</div>
<td></td>

Thus, your CSS doesn't point to an existing <td> element in your markup.

EDIT: One (example) workaround to this would be to omit your <td> tags, since all standard-compliant browsers have implemented tables without <td>s.

Upvotes: 1

Related Questions