CODEWITHSUNDEEP
javascriptc#jqueryasp.net
Cleaven
Cleaven

Reputation: 974

Removing a class from a tag

so i have a little bit of a problem with javascript.

I would like to check the checkbox and change the background color of the cell on click and remove the color and uncheck the checkbox if the user clicks on it again.

So far i have been able to change the color if a person clicks on the hyper link, the javascript below is an updated version of what i think it will be along the lines of.

this is the screen: https://i.sstatic.net/cMdiW.jpg

this is how the markup is generated

<asp:TableCell Width="100%" ColumnSpan="2">                                
      <div id="checkboxes">
           <table width="100%" border="1">
                %foreach (var qv in rs)
                 {
                   var checkid = "chk" + qv.id;
                   var tdid = "td" + qv.id;                                                                                           
                 %
                 <tr>
                    <td width="100%">  
                       <a href="#/">                       
                       <input type="checkbox" value="@qv.id" name="<%=qv.id%>" />
                       <textbox><%=qv.text%></textbox>   
                       </a>                     
                    </td>                                            
                 </tr>
                <%}%>
        </table>
  </div>                                   
</asp:TableCell>

And this is the javascript and style ive tried so far

 $("a").click(function () {
            if($(this).parent().hasClass("selected")==true)
            {
                $(this).parent().removeClass("selected");
                e.preventDefault();
            }                    
            else
            {
                $(this).parent().addClass("selected");
                e.preventDefault();
            }                
        });

style

td.selected {
        background-color: red;
    }

Thank you.

Upvotes: 0

Views: 69

Answers (2)

Andrew Mairose
Andrew Mairose

Reputation: 10995

You need to have e as a parameter to your handler function. Also, you can just use toggleClass instead of doing all that checking.

$('a').click(function(e) {
  e.preventDefault();
  $(this).parent().toggleClass('selected');
  var checkbox = $(this).find('input[type="checkbox"]');
  var isChecked = checkbox.prop('checked');
  if (isChecked) {
    checkbox.prop('checked', false);
  } else {
    checkbox.prop('checked', true);
  }
});
td.selected {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table width="100%" border="1">
  <tr>
    <td width="100%">
      <a href="#/">
        Select Me
        <input type="checkbox">
      </a>
    </td>
  </tr>
</table>

Upvotes: 2

Jai
Jai

Reputation: 74738

Try binding a change event on checkbox itself:

$(':checkbox').change(function(){
    $(this).closest('td').toggleClass('selected');
});


$(':checkbox').change(function(){
    $(this).closest('td').toggleClass('selected');
});
.selected{background:yellow;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <a href='#'>
        <input type='checkbox'>
      </a>
    </td>
  </tr>
</table>

Upvotes: 0

Related Questions