Fatal编程技术网
  • jquery/
  • Jquery 如何在html中“链接”选择属性和无线电输入？

Jquery 如何在html中“链接”选择属性和无线电输入？

jquery html select

Jquery 如何在html中“链接”选择属性和无线电输入？,jquery,html,select,radio-button,Jquery,Html,Select,Radio Button,我想知道如何链接html选择属性和单选按钮输入，如下所示： <body> <input type="radio" name="grp1" id="opt1"> <label for="opt1">Opcao 1</label> <input type="radio" name="grp1" id="opt2"> <label for="opt2">Opcao 2</label>

我想知道如何链接html选择属性和单选按钮输入，如下所示：

<body>
   <input type="radio" name="grp1" id="opt1">
   <label for="opt1">Opcao 1</label>

   <input type="radio" name="grp1" id="opt2">
   <label for="opt2">Opcao 2</label>

   <input type="radio" name="grp1" id="opt3">
   <label for="opt3">Opcao 3</label>

   <input type="radio" name="grp1" id="opt4">
   <label for="opt4">Opcao 4</label>

   <select id="radioselector">
       <option><label for="opt1">Option 1</label></option>
       <option><label for="opt2">Option 2</label></option>
       <option><label for="opt3">Option 3</label></option>
       <option><label for="opt4">Option 4</label></option>
   </select>
问题是，我想当我选择单选按钮时，选择对应者也被选中，反之亦然。我试图用jquery实现它，但是，尽管我付出了努力，我还是一无所获。。。我是网络编程的noob，特别是jquery

如果你们能帮我一把，那就太好了！提前谢谢

这是一把有解决办法的小提琴

你的js应该是这样的

$("input[name='grp1']").click(function() {
    $("#radioselector")[0].value = this.value;
});

$("#radioselector").click(function() {
    $("#" + this.value).click();
});
您需要向单选按钮添加值属性并选择选项

您需要自定义它：

将更改事件处理程序添加到无线电组和select元素：

var $radioGroup = $('input:radio[name=grp1]'),
    $select = $("#radioselector");

$radioGroup.change(function() {
    $select.val($radioGroup.filter(':checked').val());
});

$select.change(function() {
    $radioGroup.filter('[value="' + $(this).val() + '"]').prop('checked', true);
});
注意：在上面的代码中，除了要引用的标签之外，不需要单选按钮上的id属性，但是您确实应该在单选按钮上具有value属性，以具有有效的HTML。还应该从选项元素内部删除标签元素

编辑：我更新了JSFIDLE，以明确上面的代码应该放在一个文档就绪处理程序中。

那么这样做的实际目的是什么？你有没有尝试过这样做？如果是这样的话，你能展示一下你的代码并解释一下你在代码上遇到的问题吗？是的，我真的试过了，但是，正如我所说的，我是一个新的web开发人员。。。它的目的是让最终用户有机会从select或带有图像标签的无线电输入中进行选择，利用它，我们针对不同类型的用户，即更“视觉化”的用户，选择图像输入，而更多“直人”将选择select选项。我认为这是一个用户体验的话题，我认为。。。谢谢你的关注！好的，这是有道理的，但是为什么您实际上需要一组表单输入呢？您可以同样轻松地在上放置onclick事件，以执行相同的操作更改所选选项，而不必混淆发送到接收脚本的多个输入，然后必须执行诸如验证无线电输入中的所选值与选择脚本中的所选值匹配之类的操作。换言之，考虑简化你的方法。一个数据点应该匹配一个输入，而不是两个。你说得对！我要这么做！今天，我从你们身上学到了什么！谢谢大家!！尽管它不完全是我所寻找的，但对于同一问题的变体来说，它仍然是一个很好的解决方案！谢谢我只是给你们指路。我没有足够的时间来定制代码！您需要自定义它：我的源代码太短``函数setSelecti{$'select.vali；}```：为了完整性起见，我将选择John答案，但您的答案仍然非常正确，并教会了我完成工作的不同方法，谢谢！非常感谢。你的回答很好，对我帮助很大！再次感谢！ 
var $radioGroup = $('input:radio[name=grp1]'),
    $select = $("#radioselector");

$radioGroup.change(function() {
    $select.val($radioGroup.filter(':checked').val());
});

$select.change(function() {
    $radioGroup.filter('[value="' + $(this).val() + '"]').prop('checked', true);
});