jQuery way to handle select lists, radio buttons and checkboxes

Question

When I handle HTML form elements with jQuery, I always end up with an ugly mix of jQuery syntax and plain JavaScript like, e.g.:

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

Are there standard jQuery methods to handle typical operations on elements like <select>, <input type="radio"> and <input type="checkbox">?

With typical, I mean stuff like reading the value of the selected radio button in a group or replacing elements in a selection list. I haven't found them in the documentation but I admit that method overloading can make doc browser kind of tricky.

Update

Thanks everyone. Once in the right track, I figured out myself the rest of the stuff. E.g., I can handle a <select> list like any other DOM tree:

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

Answer 1

For <select> elements, you should be able to just get the value (with .val()). For radio buttons, you can do this:

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

Checkboxes are similar:

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

Those two will be null if things are unchecked (though with radio buttons it's kind-of evil for that to be the case).

edit see Nick's answer for getting the text of a selected option instead of the value (basically call .text() instead of .val()).

Answer 2

Since you want the text and not the value, use .text() for that <option> (find it using the :selected selector), like this:

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

If you wanted the value part of <option value="4" selected>Four</option> then you could use .val(), like this:

var val = $combo.val();

Answer 3

Yes, you should be able to simplify your code a lot. Here are a few examples of working with form elements:

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

See also http://api.jquery.com/category/selectors/form-selectors/ for more selectors.

Answer 4

For selects you can use the val() method. In case of multiple select the val() method returns an array of the selected options.

For checkboxes and radio you can grab all the selected checkboxes using the :checked selector.

You'll find all the details as well as examples at the jQuery site : http://api.jquery.com/val/