如果选中附加复选框并删除，则单击单选上的多个 jquery

Question

我有以下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>

当有人单击单选按钮时，我想在其旁边附加或显示一个复选框，但是如果有人单击此表另一行上的一个单选按钮，则先前显示/附加的复选框将被删除并移至此行。

我确实设法让复选框显示和隐藏，但我丢失了我的代码。任何帮助将不胜感激，我需要了解更多关于 jquery 的信息。

感谢阅读。

Answer 1

使用这个：

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

这是我的看法：

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

    });

使用以下 CSS：

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

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

还有JS Fiddle demo, here。

---

已编辑以回应 OP 的问题：

谢谢，但目前它会从两个表中删除复选框，我需要将它从当前表中删除，这可能吗？

是的，只需优化 if 语句中的选择器：

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

---

已编辑以回复 OP 的电子邮件：

我想知道您是否可以再帮我做一件事，当复选框被选中时，我想用输入框替换该行上的宽度和高度字段。

这比较容易：

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

});

稍微修改了html（注意高度和宽度单元格的class-names）：

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