jquery 单页上的多个连接的无线电输入表单

ippsafx7  于 2023-04-20  发布在  jQuery
关注(0)|答案(1)|浏览(109)

我正试图在一个页面上实现多个无线电表单,这些表单可以相互通信。
因此,当您在页面顶部的表单A中选择一个单选按钮值时,它应该在表单B中的页面底部显示相同的选择。反之亦然。
我该怎么做?
我尝试了以下代码:

const $selected = $('.course-date input:checked')

if ($selected.length > 0) {
const date = $selected.val()
$("input:radio[name='course-date-2']").val(date).attr('checked', true);
}
t9aqgxwy

t9aqgxwy1#

根据提供的信息,我相信你正在寻找的是下面的代码片段中所示的。在那里你需要使用.prop()将单选按钮设置为选中。
如果不是,请提供更多细节。

$('input[type="radio"]').on('change', function() {
  let selectedValue = $(this).val();
  console.log('radio button changed to: ', selectedValue);
  $('input[type="radio"][value=' + selectedValue + ']').prop('checked', true);
})
form {
  border: 1px solid;
  padding: 2rem;
  background: #f1f1f1;
  font-family: sans-serif;
}

form + form {
  margin-top: 2rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form>
  <h2>Form 1</h2>
  <input type="radio" id="course-date-1" name="course-date" value="course1" checked>
  <label for="course-date-1">course 1</label>
  <input type="radio" id="course-date-2" name="course-date" value="course2">
  <label for="course-date-2">course 2</label>
</form>

<form>
  <h2>Form 2</h2>
  <input type="radio" id="course-date-1A" name="course-date-A" value="course1" checked>
  <label for="course-date-1A">course 1</label>
  <input type="radio" id="course-date-2A" name="course-date-A" value="course2">
  <label for="course-date-2A">course 2</label>
</form>

相关问题