Documentation

Release:jQuery 1.2/Attributes

From jQuery JavaScript Library

Jump to: navigation, search

« Back to the full jQuery 1.2 Release Notes.

[edit]

.val() Overhaul

The simple .val() method has seen some much-needed love, making it much more useful.

You can now set the checked state of groups of radios buttons and checkboxes along with setting the selected state of select options. You can achieve this by passing in an array of values, or names, of the items that you'd like to select/check. (Fails in Firefox2, radio buttons fail in IE7)

Set the value of a single select, multiple values in a multi-select from an array, and a checkbox and radio button.

$("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1", "check2", "radio1", "radio2"]);


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#single").val("Single2");
$("#multiple").val(["Multiple2", "Multiple3"]);
$("input").val(["check1", "check2", "radio1", "radio2"]);
  });
  </script>
  
</head>
<body>
  <select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select><br/>
<input type="checkbox" name="checkboxname" value="check1"/> check1
<input type="checkbox" name="checkboxname" value="check2"/> check2
<input type="radio" name="radioname" value="radio1"/> radio1
<input type="radio" name="radioname" value="radio2"/> radio2
</body>
</html>

It's now possible to call .val() on select elements, to get their values, for example:

Get the single value from a single select and an array of values from a multiple select and display their values.

$("p").append(
  "<b>Single:</b> "   + $("#single").val() +
  " <b>Multiple:</b> " + $("#multiple").val().join(", ")
);


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("p").append(
  "<b>Single:</b> "   + $("#single").val() +
  " <b>Multiple:</b> " + $("#multiple").val().join(", ")
);
  });
  </script>
  
</head>
<body>
  <p></p><br/>
<select id="single">
  <option>Single</option>
  <option>Single2</option>
</select>
<select id="multiple" multiple="multiple">
  <option selected="selected">Multiple</option>
  <option>Multiple2</option>
  <option selected="selected">Multiple3</option>
</select>
</body>
</html>

Retrieved from "http://docs.jquery.com/Release:jQuery_1.2/Attributes"