Simple and easy to understand jQuery: HTML forms and jQuery-HTML Tutorial-php.cn
简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

Simple and easy to understand jQuery: HTML forms and jQuery

王林
Release： 2023-08-27 16:17:06
Original
1152 people have browsed it

Simple and easy to understand jQuery: HTML forms and jQuery

Disable/enable form elements

Using jQuery, you can easily disable a form element by setting the form element's disabled attribute value to disabled. To do this, we simply select an input and use theattr()method to set the input's disabled attribute to the disabled value.
Copy after login

To enable a disabled form element, we simply useremoveAttr()to remove the disabled attribute, or useattr()to set the disabled attribute value to null.
Copy after login

How to determine whether a form element is disabled or enabled

You can easily select and determine (boolean) whether a form element is disabled or enabled using the jQuery form filter expression:disabledor:enabled,. Check the code below for clarification.
Copy after login

Select/clear a single checkbox or radio button

You can select a radio button input or checkbox by usingattr()to set itscheckedattribute totrue.
Copy after login

To clear a radio button input or checkbox, simply use theremoveAttr()method to remove the checked attribute or set thecheckedattribute value to an empty string.
Copy after login

Select/clear multiple checkbox or radio button inputs

You can use jQuery'sval()on multiple checkbox inputs or radio button inputs to set the input to checked. This is done by passing theval()method an array containing a string consistent with the checkbox input or radio button input value attribute.
Copy after login

Note:If a checkbox or radio button is selected, usingval()will not clear the input element.

Determine whether a checkbox or radio button is selected or cleared

We can use the:checkedform filter to determine whether a checkbox input or radio button input is checked or cleared. Check the code below to see several uses of the:checkedfilter.
Copy after login

How to determine whether a form element is hidden

You can use the:hiddenform filter to determine whether a form element is hidden. Check the code below to see several uses of the:checkedfilter.
Copy after login

Set/get the value of the input element

val()The method can be used to set and get the attribute value of the input element (button, checkbox, hidden, image, password, radio, reset, submit, text). Below, I set the value of each input inval()and then use theval()method to alert that value.
Copy after login

Set/get the selected options of the selected element

Using theval()method, you can set the# by passing a string representing the value assigned to the
Copy after login

Set/get the selected options of multi-select elements

Using the

val()method, we can set the selected value of a multi-select element by passing an array containing the corresponding values to theval()method.

To get the selected option in a multi-select element, we again use the

val()method to retrieve the array of selected options. The array will contain the value attribute of the selected option.
Copy after login

Set/get the text contained in

Copy after login

Set/get the value attribute of the button element

You can set the value attribute of a button element by passing a text string to the

val()method. To get the value of the button element, use theval()method again to retrieve the text.
Copy after login

Edit Select Element

jQuery makes some common tasks related to editing selected elements trivial. Below are some of these tasks with coding examples. 

// Add options to a select element at the end $('select').append(''); // Add options to the start of a select element $('select').prepend(''); // Replace all the options with new options $('select').html(''); // Replace items at a certain index using the :eq() selecting filter to // select the element, and then replace it with the .replaceWith() method $('select option:eq(1)').replaceWith(''); // Set the select elements' selected option to index 2 $('select option:eq(2)').attr('selected', 'selected'); // Remove the last option from a select element $('select option:last').remove(); // Select an option from a select element via its // order in the wrapper set using custom filters $('#select option:first'); $('#select option:last'); $('#select option:eq(3)'); $('#select option:gt(5)'); $('#select option:lt(3)'); $('#select option:not(:selected)'); // Get the text of the selected option(s), this will return the text of // all options that are selected when dealing with a multi-select element $('select option:selected').text(); // Get the value attribute value of an option in a select element $('select option:last').val(); // Getting the :last option element // Get the index (0 index) of the selected option. // Note: Does not work with multi-select elements. $('select option').index($('select option:selected')); // Insert an option after a particular position $('select option:eq(1)').after(''); // Insert an option before a particular position $('select option:eq(3)').before('');
Copy after login

Select form elements by type

You can select form elements by type, for example

$('Input: Checkbox'). jQuery provides the following form type filters for selecting form elements by type.

  • :text
  • :密码
  • :radio
  • :checkbox
  • :提交
  • :image
  • :重置
  • :file
  • :button

选择所有表单元素

您可以使用:input表单过滤器选择所有表单元素。此过滤器不仅会选择输入元素，还会选择任何

Copy after login

The above is the detailed content of Simple and easy to understand jQuery: HTML forms and jQuery. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
jquery：jquery html form: html form Simple and understandable: simplified and understandable
source：php.cn
Previous article：Execute script when HTML element's scrollbar is scrolled? Next article：In HTML, how do we define the start of a list of terms?
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
function_exists() cannot determine the custom function Function test () {return true;} if (function_exists ('test')) {echo "test is function...
From 2024-04-29 11:01:01
0
2
1030
How to display the mobile version of Google Chrome Hello teacher, how can I change Google Chrome into a mobile version?
From 2024-04-23 00:22:19
0
9
1093
The child window operates the parent window, but the output does not respond. The first two sentences are executable, but the last sentence cannot be implemented.
From 2024-04-19 15:37:47
0
1
991
There is no output in the parent window document.onclick = function(){ window.opener.document.write('I am the output of the child ...
From 2024-04-18 23:52:34
0
1
858
Where is the courseware about CSS mind mapping? Courseware
From 2024-04-16 10:10:18
0
0
927
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！