jQuery方式来处理选择列表，单选按钮和复选框

Question

当我使用jQuery处理HTML表单元素时，我总是最终得到jQuery语法和普通JavaScript的丑陋混合，例如：

function doStuff($combo){
    if( $combo.get(0).options[$combo.get(0).selectedIndex].value=="" ){
        var txt = "";
    }else{
        var txt = $combo.get(0).options[$combo.get(0).selectedIndex].text;
    }
    var $description = $combo.closest("div.item").find("input[name$=\[description\]]");
    $description.val(txt);
}

是否有标准的jQuery方法来处理<select>，<input type="radio">和<input type="checkbox">等元素的典型操作？

使用典型的，我的意思是读取组中所选单选按钮的值或替换选择列表中的元素。我没有在文档中找到它们，但我承认方法重载可能会使doc浏览器变得棘手。

更新

谢谢大家。一旦进入正确的轨道，我自己想出了剩下的东西。例如，我可以像处理任何其他DOM树一样处理<select>列表：

$("select")
    .empty()
    .append('<option value="">(Pick one)</option><option value="a">Option A</option><option value="b">Option B</option>');

Answer 1

是的，您应该能够简化代码。以下是使用表单元素的几个示例：

<input type="text">

$(':text') // select all text boxes
$('input#example').val(); // gets value of a text box

<input type="checkbox">

$(':checkbox') // selects all checkboxes
$('input.example:checked') // selects all ticked checkboxes with class 'example'
$('#example').is(':checked'); // true if checkbox with ID 'example' is ticked

<input type="radio">

$(':radio') // selects all radio buttons
$(':radio:checked').each( function() {
    $(this).val(); // gets value of each selected radio button
});
$('input:radio[name="asdf"]'); // gets particular group of radio buttons

<select>

$('select#example').change( function() {
    // this part runs every time the drop down is changed
    $(this).val(); // gets the selected value
});

有关更多选择器，另请参阅http://api.jquery.com/category/selectors/form-selectors/。

Answer 2

由于您需要文字而不是值，因此<option>使用.text()（使用:selected selector找到它），像这样：

function doStuff($combo){
  var txt = $combo.children("option:selected").text();
  $combo.closest("div.item").find("input[name$=\[description\]]").val(txt);
}

如果您想要<option value="4" selected>Four</option>的值部分，那么您可以使用.val()，如下所示：

var val = $combo.val();

Answer 3

对于<select>元素，您应该能够获得值（使用.val()）。对于单选按钮，您可以这样做：

$('input:radio[name=whatever]:checked').val()

复选框类似：

$('#checkboxId:checked').val()

如果事情未被检查，那么这两个将为null（虽然使用单选按钮，但事实并非如此）。

编辑请参阅Nick的答案，获取所选选项的内容而不是值（基本上调用.text()而不是.val()）。

Answer 4

对于选择，您可以使用val()方法。如果选择多个，val()方法将返回所选选项的数组。

对于复选框和广播，您可以使用:checked选择器抓取所有选中的复选框。

您可以在jQuery网站上找到所有细节和示例：http://api.jquery.com/val/

Answer 5

对于Select元素，您应该能够获得值（使用.val()）。对于radio buttons，您可以这样做：

$('input:radio[name=whatever]:checked').val()

复选框类似：

$('#checkboxId:checked').val()

如果事情未被检查，那么这两个将为null（虽然使用单选按钮，但事实并非如此）。

编辑，请参阅Nick的答案，获取所选选项的内容而不是值（基本上调用.text()代替.val()）。

忽略格式化....我还没有这样做..;）