How to get value of element in JQuery

By FoxLearn Published on Dec 11, 2024   192
To get the value of an element using jQuery, you can use different methods depending on the type of element you're working with.

For example:

<form>
  <input type="text" id="myInput" value="jQuery">
  <select id="mySelect">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
  </select>
  <input type="checkbox" id="myCheckbox" checked>
</form>

<script>
  $(document).ready(function() {
    var inputValue = $('#myInput').val(); // "Hello"
    var selectedValue = $('#mySelect').val(); // "1"
    var checkboxChecked = $('#myCheckbox').prop('checked'); // true
  });
</script>

JQuery get value of element

For example, Getting the value of an input field, hidden field.

var value = $('#myInput').val();

This will get the current value of an input element with the id="myInput".

For example, Getting the value of a selected option in a dropdown.

var selectedValue = $('#mySelect').val();

This will return the value of the selected option in the dropdown.

For example, Getting the checked status of a checkbox or radio button.

var isChecked = $('#myCheckbox').prop('checked');

This will return true if the checkbox is checked, otherwise false.

For example, Getting the text of an element

var text = $('#myElement').text();

This will retrieve the text content inside the element.

For example, Getting the value of a data attribute.

var dataValue = $('#myElement').data('attribute-name');

This gets the value of a data-* attribute (for example, data-id="123").