Mutiple jquery auf Anklickradio wenn geprüft wird append Checkbox mit der Entfernung

Question

Ich habe folgende 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> 
<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> 

Wenn jemand das Optionsfeld klickt würde Ich mag ein Kästchen neben es jedoch anhängen oder zeigen, wenn jemand klickt Wenn Sie eine der Optionsschaltflächen in einer anderen Zeile auf dieser Tabelle auswählen, wird das zuvor angezeigte/angehängte Kontrollkästchen entfernt und in diese Zeile verschoben.

Ich habe es geschafft, die Kontrollkästchen zu zeigen und zu verbergen, aber ich habe meinen Code verloren. Jede Hilfe würde sehr geschätzt werden, ich muss mehr über jquery lernen.

Danke fürs Lesen. diese

Answer 1

Verwendung:

$(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(); 
    }); 
}); 

Answer 2

Dies ist mein nehmen:

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

    }); 

Unter Verwendung der folgenden CSS:

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

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

Und mit einem JS Fiddle demo, here.

---

Herausgegeben als Antwort von OP in Frage:

Danke, aber im Moment entfernt sie die Kontrollkästchen aus beiden Tabellen Ich brauche es aus der aktuellen Tabelle ony zu entfernen, ist dies möglich, ?

Yep, verfeinern Sie einfach die Wähler in der if Aussage:

$('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,

---

als Antwort auf eine E-Mail vom OP Editiert:

I Ich frage mich, ob Sie mir mit einer weiteren Sache helfen könnten, wenn das Kontrollkästchen aktiviert ist, möchte ich die Felder für Breite und Höhe in dieser Zeile durch Eingabefelder ersetzen.

Das ist relativ einfach:

$('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)); 
       }); 
    } 

}); 

Mit leicht geänderten HTML (man beachte die class -namen der Höhe und Breite-Zellen):

<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).