What’s the difference between jQuery .val() and .attr(‘value’)?

by

.val() works on all input type elements in a useful way, including <select>…even in the cases of <select multiple>, checkboxes, and radio buttons (in which .val() gets or sets an array of selected values not just a string).

So basically they serve different purposes, even though .attr('value') behaves the same in some situations, like textboxes. The preferred method is .val() to get consistent behavior everywhere.

Just for kicks, here’s a lesser-known example for checkboxes that makes .val() handy:

<input name="mytest" type="checkbox" value="1">
<input name="mytest" type="checkbox" value="2">
<input name="mytest" type="checkbox" value="3">
<input name="mytest" type="checkbox" value="4">

You can do this:

$("input[name="mytest"]").val([1, 2, 3]);

….which will check the first 3 boxes. You can give it a try here.

More Related Contents:

  1. Allowing frontend JavaScript POST requests to https://accounts.spotify.com/api/token endpoint
  2. jQuery find parent form
  3. jQuery UI Slider (setting programmatically)
  4. Autofocus input in twitter bootstrap modal
  5. What HTTP status codes count as success in jQuery.ajax?
  6. Autocomplete disallow free text entry?
  7. Determine mouse position outside of events (using jQuery)?
  8. handle ajax error when a user clicks refresh
  9. How to select a table column with jQuery
  10. Switch positions of 2 divs with jQuery
  11. Preventing “SCRIPT5: Access is denied” error in IE
  12. Overriding CSS styles of the jQuery UI Tooltip widget
  13. Looking for a JQuery plug-in similar to Accordion, but that allows multiple sections open at once [closed]
  14. Trigger click jquery not working
  15. How do I console.log a jQuery DOM Element in Chrome?
  16. Can jQuery .load append instead of replace?
  17. Mobile Safari $(window).height() URL bar discrepancy
  18. jQuery to trigger a click on an iFrame?
  19. changing data attribute isn’t working
  20. How do you make a picture follow your mouse pointer with jquery?
  21. JQuery :contains function limit to exact match
  22. how to push a message from web server to browser using node js
  23. jQuery multiple input name[] validation
  24. How to destroy a DOM element with jQuery?
  25. Keep Bootstrap dropdown open on click
  26. Jquery UI tooltip does not support html content
  27. JQuery ajax call default timeout value
  28. DataTables fixed headers misaligned with columns in wide tables
  29. How do I POST an array of objects with $.ajax (jQuery or Zepto)
  30. scrolltop with animate not working

Leave a Comment