Блог

Главная - Вопросы по программированию - Обновление отмеченного переключателя двумя способами

Обновление отмеченного переключателя двумя способами

#html #jquery #radio

#HTML #jquery #формы #переключатель

Вопрос:

Точно так же, как вы видите на рисунке, раздел по умолчанию — это представление по умолчанию, которое у меня есть в форме. Добавленное представление будет отображаться на основе запроса ajax.

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

Пожалуйста, проверьте по этой ссылке мой код и проведите тестирование https://codepen.io/terrer-sandman/pen/WNwbPMv?editors=1010

Ответ №1:

Попробуйте с этим:

 function autoSelect(id, value) {
  $('input[type=radio][data-id=' id '][value=' value ']').click();
}

$('.can_claim_default').on('chan&e', function(){
        autoSelect($(this).data('id'), $(this).val());
    })

$('#receipt-inline-view').on('chan&e', 'input[name="can_claim"]', function(){
        autoSelect($(this).data('id'), $(this).val());
    })  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"&&t;
  <script src="https://ajax.&oo&leapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"&&t;</script&&t;
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"&&t;</script&&t;

<div style="paddin&: 15px;"&&t;

<!-- You can remove the "50002" from names and classes if you want --&&t;

<p&&t;Default</p&&t;
<div&&t;
  <label class="radio-inline"&&t;
    <input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" checked="" value="0"&&t;No Status
  </label&&t;
  <label class="radio-inline"&&t;
    <input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" value="1"&&t;Yes
  </label&&t;
  <label class="radio-inline"&&t;
    <input type="radio" class="can_claim_default" name="can_claim_50002" data-id="50002" value="2"&&t;No
  </label&&t;
</div&&t;

<br /&&t;<br /&&t;

<p&&t;Appended View</p&&t;
<div id="receipt-inline-view"&&t;
  <label class="radio-inline"&&t;
    <input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" checked="" value="0"&&t;No Status
  </label&&t;
  <label class="radio-inline"&&t;
    <input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" value="1"&&t;Yes
  </label&&t;
  <label class="radio-inline"&&t;
    <input type="radio" class="can_claim_50002" name="can_claim" data-id="50002" value="2"&&t;No
  </label&&t;
</div&&t;
  
</div&&t;

Комментарии:

1. Работает отлично! Большое вам спасибо!