使用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">这样的元素？所谓“典型”，是指诸如读取组中选定的单选按钮的值或替换选择列表中的元素之类的操作。我在文档中没有找到它们，但我承认方法重载可能使文档浏览器变得有点棘手。

更新

谢谢大家。一旦找到正确的轨迹，我就自己解决了其他问题。例如，我可以像处理任何其他DOM树一样处理<select> 列表。

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

- Álvaro González

---

这是jQuery吗？我以为你需要在选择器周围加上括号...编辑：算了，我刚意识到那应该是一个带有美元符号的变量。 - dclowd9901

@dclowd9901：是的，抱歉，这只是一些小的匈牙利命名法 - http://en.wikipedia.org/wiki/Hungarian_notation - Álvaro González

是的，我需要记住将 $ 视为 jQuery 专属标签的概念与其他语言分开。作为 PHP 程序员，你会认为这是自然而然的事情。 - dclowd9901

Answer 1

是的，您应该能够大大简化您的代码。以下是一些处理表单元素的示例：

<input type="text">

<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/。

- DisgruntledGoat

Answer 2

如果您只需要文本而不是值，那么可以使用.text()获取该<option>的文本（使用:selected选择器查找），如下所示：

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();

- Nick Craver

Answer 3

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

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

复选框类似于：

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

如果未选中事项，则这两个值将为空（但对于单选按钮而言，这种情况有点邪恶）。

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

- Pointy

Answer 4

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

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

复选框类似：

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

如果未选中任何内容，则这两个将为空（尽管对于单选按钮而言，这种情况有点邪恶）。

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

忽略格式...我还没有做好...;)

- gaurav

Answer 5

对于选择器，您可以使用val()方法。在多选情况下，val()方法返回所选选项的数组。

对于复选框和单选按钮，您可以使用:checked选择器获取所有选中的复选框。

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

- Pierre Henry