0

我有一个项目列表，可以从下拉列表中选择值或输入自由文本。我希望在单击下拉菜单或文本框时自动选择一个单选按钮。

我有：

<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

4

3 回答 3

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 小提琴。

于 2013-09-04T19:30:58.583 回答
0

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

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

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

于 2013-09-04T19:17:29.157 回答
0

试试这个：

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

.prev()只要无线电输入紧接在具有类的元素之前，这将使用并且将适用于您需要的尽可能多的元素.click_radio。

它在这里工作：http: //jsfiddle.net/tv8SR/4/

于 2013-09-04T19:18:42.170 回答