Question

我有一个项目列表，可以从下拉列表或输入的自由文本中选择值。我想在点击它们时在下拉列表或文本框旁边自动选择一个单选按钮。

我有：

<script type="text/javascript">
  $(".click_radio").click(function() {  
    $(this).find('input[type=radio]').prop('checked', true);
  });
</script>

<html>
  <table>
    <tr>
      <td><input type="checkbox" name="ord_55" value="yes" /> Sodium Chloride </td>
      <td><input type="RADIO" name="dose" value="drop"/> &nbsp;
        <select id="drop_dose_1" name="nsbolus_drop_dose" class="click_radio">
          <option></option>
          <option>250</option>
          <option>500</option>
          <option>1000</option>
        </select> ml
      </td>
      <td><input type="RADIO" name="dose" value="text"/> &nbsp; 
        <input type="text" size="4" id="text_dose_1" name="nsbolus_text_dose" value="" class="click_radio"/> ml
      </td>
      <td><select name="nsbolus_pri">
          <option>STAT</option>
          <option>NEXT SCH</option>
          <option>1ST DOSE TODAY</option>
        </select></td>
    </tr>
  </table>
</html>

我可以直接触发它但我真的想要一个通用脚本，它适用于跟随这个项目的任何类似项目中的任何一个。

谢谢！

修改我还应该提到我正在使用JQuery 1.9.1

Answer 1

虽然你已经有了很好的答案，但我认为我会加入我的答案，因为目前的答案无法解决你所拥有的选择框。

这是一个工作小提琴：http://jsfiddle.net/CBRc4/1/

我所做的更改非常简单，我使该函数可重用并监听两种类型的事件。为了选择和检查正确的无线电，我只需使用.siblings(selector)。

以下是小提琴的代码：

var eventHandler = function() {
  $(this).siblings('input[type=radio]').prop('checked', true);
};

$(function() {
  $(".click_radio").on({
    click: eventHandler,
    change: eventHandler
  });
});

您可以看到我为点击和更改重复使用相同的处理程序以确保相同的功能。

编辑：jQuery 1.9.1的工作示例http://jsfiddle.net/CBRc4/2/

关于为什么原始示例在1.9.1中的jQuery中不起作用的注释是类型声明type="RADIO"并且您查询input[type=radio]。如果您更改为匹配，那么它将成功执行选择（很可能是关于Sizzle选择器引擎的更改）。但是这个例子在改变之后在1.9.1中找到并且我已经链接到一个工作的1.9.1小提琴。

Answer 2

只要元素都在同一容器中，您就可以使用siblings([selector])。（可选）您可以在输入的rel属性中提供选择器，然后单击onclick，使用rel作为选择器来触发或设置适当的其他元素。

$("text_dose_1").on('click', function() { this.siblings('input[type="radio"]').attr('checked', 'checked'); });

只要单选按钮在一个组中，其他按钮就应该取消选中。

Answer 3

试试这个：

$('.click_radio').on('click change', function(){
    $(this).prev('input[type="radio"]').prop('checked', true);
});

这使用.prev()，只要在具有.click_radio类的元素之前立即，就可以使用所需数量的元素。

这里有效：http://jsfiddle.net/tv8SR/4/

jquery下拉点击选择最近的广播

3 个答案: