Mutiple JQuery на клик радио, если установлен флажок и добавить флажок с удалением - PullRequest
Новая
       18

Mutiple JQuery на клик радио, если установлен флажок и добавить флажок с удалением

0 голосов
/ 15 января 2011

У меня есть следующий 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.

Спасибо за чтение.

Ответы [ 2 ]

0 голосов
/ 15 января 2011

Это мой дубль: 

$('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, здесь .

Отредактировано в ответ на вопрос 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 ,

Отредактировано в ответ на электронное письмо от ОП:

Мне было интересно, не могли бы вы помочь мне с еще одной вещью, когда флажок установлен,Я хотел бы заменить поля ширины и высоты в этой строке полями ввода.

Это относительно просто: 

$('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 -имена ячеек высоты и ширины): 

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

Требуется демонстрационная версия JS Fiddle (3) .

0 голосов
/ 15 января 2011

Используйте это: 

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