jQuery add border to table.

Question

Hi, I'm a jQuery noob, I tried this:

<input value="1"  type="checkbox" name="mytable" id="checkbox2"  style="float:left;"
        />

{literal}

<script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
            <script type="text/javascript">
$(function() {
   //checkbox
   $(".mytable").click(function(){
    $(".mytable").toggleClass('mytableborders');

    });
});
</script>
{/literal}

<table class="mytable" id="cart">....</table>

But it doesn't work, I want the checkbox to change the class of the table from .mytable to .mytableborders.

Thanks :)

Answer 1

Your checkbox id is "checkbox2". So the selector for your checkbox is $("#checkbox2"), and your table id is "cart" and selector is $("#cart")

Try

$("#checkbox2").click(function(){
    $("#cart").toggleClass('mytableborders');
});

Answer 2

Toggle class will add the class if it's not present and remove it if it is. If you want it to swap the classes, use addClass and removeClass:

    $(".mytable").removeClass('mytable').addClass('mytableborders');

Answer 3

$(function() {
  $("#checkbox2").click(function(){
    $("#cart").toggleClass('mytableborders');
  });
});

The click event should be attached to the checkbox by ID, not name.