jquery не работает для переключателя

Question

У меня есть две группы, у которых есть кнопка radio. Что он делает, когда выбран пакет выше, выбранный пакет ниже должен быть тем же самым из вышеизложенного, наоборот. Например, если я выбираю «Deluxe» в первом, другой должен также быть «Deluxe». Проблема в том, что когда я выбираю «Deluxe» наверху, другой пакет по-прежнему находится в предыдущем отборе. Сначала попробуйте, все работает, но при повторном выборе проблемы возникает проблема. Также хочу выделить выделенный пакет. Другая часть кода here

Html

<table class="tblPackage"> 
<thead> 
     <tr style="text-align: center;"> 
      <td width="30%"></td> 
      <td width="1%"></td> 
      <td width="19%" valign="top"> 
       <div class="d17_1"> 
        <div class="d17_2">ECONOMY</div><span class="s11">$49</span> 
       </div> 
      </td> 
      <td width="19%" valign="top"> 
       <div class="d17_1"> 
        <div class="d17_2">DELUXE</div><span class="s11">$79</span> 
       </div> 
      </td> 
      <td width="19%" valign="top"> 
       <div class="d17_1"> 
        <div class="d17_2">ULTIMATE</div><span class="s11">$149</span> 
       </div> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <colgroup> 
      <col id="colA"/> 
      <col id="colB"/> 
      <col id="colC"/> 
      <col id="colD"/> 
      <col id="colE"/> 
     </colgroup> 
        <tr> 
        <td style="text-align: left;"><h5>Choose Package</h5></td> 
        <td></td> 
        <td> 
         <center> 
          <input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" class="css-checkbox" onclick="ChangeColColor(this,'colC')"/> 
          <label for="tcbx1" class="css-label"></label> 
         </center> 
        </td> 
        <td> 
         <center> 
          <input type="radio" name="radiog_dark" value="79.00" id="tcbx2" class="css-checkbox" onclick="ChangeColColor(this,'colD')"/> 
          <label for="tcbx2" class="css-label"></label> 
         </center> 
        </td> 
        <td> 
         <center> 
          <input type="radio" name="radiog_dark" value="149.00" id="tcbx3" class="css-checkbox" onclick="ChangeColColor(this,'colE')"/> 
          <label for="tcbx3" class="css-label"></label> 
         </center> 
        </td>      
        </tr> 
    </tbody> 
    </table> 

<table class="tblsubPackage" width="90%"> 
    <tr> 
     <td width="31%"><h5>Choose Package</h5></td> 
     <td width="19%" valign="top"> 
      <div class="d17_1"> 
       <div class="d17_2">ECONOMY </div><span class="s11">$49</span> 
      </div> 
      <center> 
       <input type="radio" name="radiog_lit" checked value="49.00" id="tscbx1" class="css-checkbox" /> 
       <label for="tscbx1" class="css-label"></label> 
      </center> 
     </td> 
     <td width="19%" valign="top"> 
      <div class="d17_1"> 
       <div class="d17_2">DELUXE</div><span class="s11">$79</span> 
      </div> 
      <center> 
       <input type="radio" name="radiog_lit" value="79.00" id="tscbx2" class="css-checkbox" /> 
       <label for="tscbx2" class="css-label"></label> 
      </center> 
     </td> 
     <td width="19%" valign="top"> 
      <div class="d17_1"> 
       <div class="d17_2">ULTIMATE</div><span class="s11">$149</span> 
      </div> 
       <center> 
        <input type="radio" name="radiog_lit" value="149.00" id="tscbx3" class="css-checkbox" /> 
        <label for="tscbx3" class="css-label"></label> 
       </center> 
      </td> 
     </tr> 
    </table> 

Answer 1

Вы можете уменьшить ваш код с помощью запуска JQuery с селектором для радио-кнопки, имеющие id сек, начиная с любого tscbx или tcbx, как показано ниже, и получить индекс идентификатора найдите соответствующий переключатель.

Вы должны использовать .prop() вместо .attr()

Кроме того, чтобы установить цвет фона, вы можете поместить data-col атрибут в радио-кнопки и использовать то же самое, чтобы найти col и установить цвет фона (хотя он не работает в JSFiddle).

<input type="radio" name="radiog_dark" 
     checked value="49.00" id="tcbx1" 
     class="css-checkbox" data-col="colC"/> 

JQuery: -

$('input[type="radio"][id^="tscbx"]').click(function() { 
    var index = $(this).attr('id').replace('tscbx',''); 
    $('#tcbx'+index).prop('checked', true);  
}); 

$('input[type="radio"][id^=tcbx]').click(function() { 
    var index = $(this).attr('id').replace('tcbx',''); 
    $('#tscbx'+index).prop('checked', true); 

    //remove all colgroup background 
    $('colgroup col').css('background-color','white'); 
    //put selected bacground for selected radio 
    var colId= $(this).data('col'); 
    var varColor = "rgba(0,140,203,.2)"; 
    $('#'+colId).css('background-color',varColor); 
}); 

JSFiddle Demo

Answer 2

Для JQuery 1,9 или выше, вам нужно пользователю .prop("checked", true) вместо .atrr()

Фот подсветке создать CSS класс и изменить его с .toogleClass

Answer 3

обрабатывать его одним щелчком мыши.

$('.tcbx').click(function (event) { 
    var test = $(this).data('test'); 
    $('#'+test).prop('checked', this.checked); 
}); 

просто убедитесь, что у вас есть атрибут data в вариант, который соответствует с атрибутом id подпункта пакета или наоборот

<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" 
     class="css-checkbox tcbx" data-test="tscbx1" /> 
         //---^^^^ added a class here 

и добавить класс.

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

Это просто пример, который можно Actaully избежать разные id надеюсь, что вы будете работать на нем

Примечание: Вы можете изменить test к тому, что когда-либо переменной вам нравится.

здесь вы идете

http://jsfiddle.net/aohsny6y/20/

Answer 4

$('#tscbx3').attr('checked','true')