jquery ui按钮集，用于选择选中的单选按钮

jquery ui buttonset to select a checked radio button

本文关键字：单选按钮 选择 用于 ui 按钮 jquery      更新时间：2023-09-26

我需要根据用户选择的按钮更新隐藏字段

代码：

<div id="bankRadioButtons">
<table>
  <tr><td><input type="radio" id="Bank1" name="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
  <tr><td><input type="radio" id="Bank2" name="bankRadioButtons" /><label for="Bank2">Bank2</label></td></tr>
  <tr><td><input type="radio" id="Bank3" name="bankRadioButtons" /><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" value="" />

Javascript代码：

$("#bankRadioButtons").buttonset();
$("#bankRadioButtons").buttonset().bind('click', function(event) {
  // I need to write code here to update the hidden field 'selectedBank' based on user selected bank radio button
}

描述

给单选按钮一个value，然后就可以使用jQuery的change()和val()方法。

jQuery.change（）将事件处理程序绑定到；改变"；JavaScript事件，或在元素上触发该事件。

jQuery.val（）获取匹配元素集中第一个元素的当前值。

看看我的样品和这个jsFiddle演示

样品

<div id="bankRadioButtons">
<table>
  <tr><td><input type="radio" id="Bank1" value="Bank1" name="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
  <tr><td><input type="radio" id="Bank2" value="Bank2" name="bankRadioButtons" /><label for="Bank2">Bank2</label></td></tr>
  <tr><td><input type="radio" id="Bank3" value="Bank3" name="bankRadioButtons" /><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" value="" />
$("input[type='radio'][name='bankRadioButtons']").change(function(event) {
    $("input[type='hidden'][name='selectedBank']").val($(this).val());
});

更多信息

  • jQuery.change（）
  • jQuery.val（）

更新

以下将有更好的性能。使用html中的class和id属性。

<div id="bankRadioButtons">
<table>
  <tr><td><input type="radio" id="Bank1" value="Bank1" name="bankRadioButtons" class="bankRadioButtons" /><label for="Bank1">Bank1</label></td></tr>
  <tr><td><input type="radio" id="Bank2" value="Bank2" name="bankRadioButtons" class="bankRadioButtons"/><label for="Bank2">Bank2</label></td></tr>
  <tr><td><input type="radio" id="Bank3" value="Bank3" name="bankRadioButtons" class="bankRadioButtons"/><label for="Bank3">Bank3</label></td></tr>
</table>
</div>
<input type="hidden" name="selectedBank" id="selectedBank" value="" />
$(".bankRadioButtons").change(function(event) {
    $("#selectedBank").val($(this).val());
});

更新的jsFiddle

你可以做：

$("#bankRadioButtons").buttonset();
$("#bankRadioButtons").buttonset().bind('click', function(event) {
 switch(this.id)
    {
      case "Bank1" : $("#selectedBank").val("Bank1"); 
       break;  // and then case "Bank2" etc.
    }
}

试试这个：

var value = $("input[@name=bankRadioButtons]:checked").val();
$("input[@name=selectedBank]").val(value);

祝你好运！

相关文章：