Mutiple jquery on click radio if is checked append checkbox with removal

I have the following html

<styles>.checkbox{display:none}</styles>
<table width="288" border="1" id="product1">
<tr>
<td width="72">Width</td>
<td width="75">Height</td>
<td width="48">Price</td>
<td width="65">Select</td>
</tr>
<tr>
<td>200</td>
<td>500</td开发者_如何学Python>
<td>£50.00</td>
<td><input type="radio" name="product1" value="size1" /> Customise<input type="checkbox" name="custom[size1]" class="custombox" value="1"/></td>
 </tr>
 <tr>
<td>200</td>
<td>1000</td>
<td>£100.00</td>
<td><input type="radio" name="product1" value="size2" /> Customise<input type="checkbox" name="custom[size2]" class="custombox" value="1"/></td>
</tr>
<tr>
<td>200</td>
<td>1500</td>
<td>£150</td>
<td><input type="radio" name="product1" value="size3" /> Customise<input type="checkbox" name="custom[size3]" class="custombox" value="1"/></td>
</tr>
</table>
<table width="288" border="1" id="product2">
<tr>
<td width="72">Width</td>
<td width="75">Height</td>
<td width="48">Price</td>
<td width="65">&nbsp;</td>
</tr>
 <tr>
<td>200</td>
<td>500</td>
<td>£50.00</td>
<td><input type="radio" name="product2" value="size1" /> Customise<input type="checkbox" name="custom[size1]" class="custombox" value="1"/></td>
</tr>
<tr>
<td>200</td>
<td>1000</td>
<td>£100.00</td>
<td><input type="radio" name="product2" value="size2" /> Customise<input type="checkbox" name="custom[size2]" class="custombox" value="1"/></td>
 </tr>
 <tr>
<td>200</td>
<td>1500</td>
<td>£150</td>
<td><input type="radio" name="product2" value="size3" /> Customise<input type="checkbox" name="custom[size3]" class="custombox" value="1"/></td>
 </tr>
<table>

When somebody clicks the radio button I would like to append or show a checkbox next to it, however if somebody clicks one of the radio buttons on another row on this table the previously shown/appended checkbox will be removed and moved to this row.

I did manage to get the checkboxes to show and hide but I lost my code. Any help would be much appreciated I need to learn more on jquery.

Thanks for reading.

Use this:

$(document).ready(function() {
  $("body :checkbox").hide();

  // The most obvious way is to set radio-button click handlers for each table separatly:
  $("#product1 :radio").click(function() {
    $("#product1 :checkbox").hide();
    $(this).parent().children(":checkbox").show();
  });

  $("#product2 :radio").click(function() {
    $("#product2 :checkbox").hide();
    $(this).parent().children(":checkbox").show();
  });
});

This is my take:

$('input:radio').change(
    function(){
        if ($(this).is(':checked')) {
            $('input:checkbox.shown').removeClass('shown');
            $(this).next('input:checkbox').addClass('shown').show();
        }

    });

Using the following CSS:

input[type=checkbox] {
    display: none;
}

input[type=checkbox].shown {
    display: inline;
}

And with a JS Fiddle demo, here.

Edited in response to question by OP:

Thanks, but at the moment it removes the checkboxes from both tables I need it to ony remove from the current table, is this possible?

Yep, just refine the selector in the if statement:

$('input:radio').change(
    function(){
        if ($(this).is(':checked')) {
            $(this).closest('table').find('input:checkbox.shown').removeClass('shown');
            $(this).next('input:checkbox').addClass('shown').show();
        }

    });

JS Fiddle demo 2,

Edited in response to an email from the OP:

I was wondering if you could possibly help me out with one more thing, when the check box is checked, I would like to replace the width and height fields on that row with input boxes.

That's relatively easy:

$('input:radio').change(
function() {
    if ($(this).is(':checked')) {
        $(this)
            .closest('table')
            .find('tr.shown')
            .removeClass('shown')
            .find('.height, .width')
            .each(
                function(){
                    var text = $(this).find('input:text').val();
                    $(this).empty().text(text);
                });

        $(this)
            .closest('tr')
            .addClass('shown')
            .find('.height, .width')
            .each(
                function(){
                    var curVal = $(this).text();
                    $(this).empty();
                    $('<input type="text" value="'+ curVal +'" />')
                        .appendTo($(this));
                });
    }

});

With slightly amended html (note the class-names of the height and width cells):

<table width="288" border="1" id="product1">
    <tr>
        <td width="72">Width</td>
        <td width="75">Height</td>
        <td width="48">Price</td>
        <td width="65">Select</td>
    </tr>
    <tr>
        <td class="width">200</td>
        <td class="height">500</td>
        <td>£50.00</td>
        <td><input type="radio" name="product1" value="size1" /> Customise<input type="checkbox" name="custom[size1]" class="custombox" value="1"/></td>
    </tr>
    <tr>
        <td class="width">200</td>
        <td class="height">1000</td>
        <td>£100.00</td>
        <td><input type="radio" name="product1" value="size2" /> Customise<input type="checkbox" name="custom[size2]" class="custombox" value="1"/></td>
    </tr>
    <tr>
        <td class="width">200</td>
        <td class="height">1500</td>
        <td>£150</td>
        <td><input type="radio" name="product1" value="size3" /> Customise<input type="checkbox" name="custom[size3]" class="custombox" value="1"/></td>
    </tr>
</table>
<table width="288" border="1" id="product2">
    <tr>
        <td width="72">Width</td>
        <td width="75">Height</td>
        <td width="48">Price</td>
        <td width="65">&nbsp;</td>
    </tr>
    <tr>
        <td class="width">200</td>
        <td class="height">500</td>
        <td>£50.00</td>
        <td><input type="radio" name="product2" value="size1" /> Customise<input type="checkbox" name="custom[size1]" class="custombox" value="1"/></td>
    </tr>
    <tr>
        <td class="width">200</td>
        <td class="height">1000</td>
        <td>£100.00</td>
        <td><input type="radio" name="product2" value="size2" /> Customise<input type="checkbox" name="custom[size2]" class="custombox" value="1"/></td>
    </tr>
    <tr>
        <td class="width">200</td>
        <td class="height">1500</td>
        <td>£150</td>
        <td><input type="radio" name="product2" value="size3" /> Customise<input type="checkbox" name="custom[size3]" class="custombox" value="1"/></td>
    </tr>
    <table>

Requisite JS Fiddle demo (3).