Rumah > Artikel > hujung hadapan web > jQuery yang ringkas dan mudah difahami: Borang HTML dan jQuery

jQuery yang ringkas dan mudah difahami: Borang HTML dan jQuery

王林asal: 2023-08-27 16:17:061229semak imbas

Lumpuhkan/dayakan elemen borang

Menggunakan jQuery, anda boleh melumpuhkan elemen borang dengan mudah dengan menetapkan nilai atributnya yang dilumpuhkan kepada dilumpuhkan. Untuk melakukan ini, kami hanya memilih input dan menggunakan kaedah attr() untuk menetapkan atribut dilumpuhkan input kepada nilai dilumpuhkan. attr() 方法，将输入的禁用属性设置为禁用值。

<!DOCTYPE html>
<html lang="en">
<body>
    <input name="button" type="button" id="button" value="Click me">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      $('#button')
            .attr('disabled', 'disabled');
  })(jQuery); </script>
</body>
</html>

要启用禁用的表单元素，我们只需使用 removeAttr() 删除禁用的属性，或使用 attr() 将禁用的属性值设置为空。

<!DOCTYPE html>
<html lang="en">
<body>
    <input name="button" type="button" id="button" value="Click me" disabled="disabled">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){  $('#button').removeAttr('disabled'); 
            // or
      // $('#button').attr('disabled', ''); 
  })(jQuery); </script>
</body>
</html>

如何确定表单元素是禁用还是启用

使用 jQuery 表单过滤器表达式 :disabled 或 :enabled, 可以很容易地选择和确定（布尔值）表单元素是否被禁用或启用。检查下面的代码以进行澄清。

<!DOCTYPE html>
<html lang="en">
<body>
    <input name="button" type="button" id="button1">
    <input name="button" type="button" id="button2" disabled="disabled">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // Is it enabled?
      alert($('#button1').is(':enabled')); // Alerts true 
      // Or, using a filter
      alert($('#button1:enabled').length); // Alerts "1" 
      // Is it disabled?
      alert($('#button2').is(':disabled')); // Alerts "true" 
      // Or, using a filter 
      alert($('#button2:disabled').length); // Alerts "1" 
  })(jQuery); </script>
</body>
</html>

选择/清除单个复选框或单选按钮

您可以通过使用 attr() 将其 checked 属性设置为 true 来选择单选按钮输入或复选框。

<!DOCTYPE html>
<html lang="en">
<body>
    <input name="" value="" type="checkbox">
    <input name="" value="" type="radio">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){ 
      // Set all check boxes or radio buttons to selected
      $('input:checkbox,input:radio').attr('checked', 'checked');
  })(jQuery); </script>
</body>
</html>

要清除单选按钮输入或复选框，只需使用 removeAttr() 方法删除选中的属性或将 checked 属性值设置为空字符串即可。

<!DOCTYPE html>
<html lang="en">
<body>
    <input name="" type="checkbox" value="Test1" checked="checked">
    <input name="" type="radio" value="Test2" checked="checked">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){  $('input').removeAttr('checked'); 
  })(jQuery); </script>
</body>
</html>

选择/清除多个复选框或单选按钮输入

您可以在多个复选框输入或单选按钮输入上使用 jQuery 的 val() 将输入设置为选中。这是通过向 val() 方法传递一个数组来完成的，该数组包含与复选框输入或单选按钮输入值属性一致的字符串。

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="radio" value="radio1">
    <input type="radio" value="radio2">
    <input type="checkbox" value="checkbox1">
    <input type="checkbox" value="checkbox2">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){ 
      // Check all radio and check box inputs on the page.
      $('input:radio,input:checkbox').val(['radio1', 'radio2', 'checkbox1', 'checkbox2']); 
      // Use explicit iteration to clear.
      // $('input:radio,input:checkbox').removeAttr('checked'); 
      // or
      // $('input:radio,input:checkbox').attr('checked', '');
  })(jQuery); </script>
</body>
</html>

注意：如果已选中复选框或单选按钮，则使用 val() 将不会清除输入元素。

确定复选框或单选按钮是否被选中或清除

我们可以使用 :checked 表单过滤器来确定复选框输入或单选按钮输入是否被选中或清除。检查下面的代码以了解 :checked 过滤器的几种用法。

<!DOCTYPE html>
<html lang="en">
<body>
    <input checked="checked" type="checkbox">
    <input checked="checked" type="radio">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){ 
      // Alerts "true"
      alert($('input:checkbox').is(':checked')); 
      // Or, added to wrapper set if checked. Alerts "1"
      alert($('input:checkbox:checked').length); 
      // Alerts "true"
      alert($('input:radio').is(':checked')); 
      // Or, added to wrapper set if checked. Alerts "1"
      alert($('input:radio:checked').length);
  })(jQuery); </script>
</body>
</html>

如何确定表单元素是否隐藏

您可以使用 :hidden 表单过滤器确定表单元素是否隐藏。检查下面的代码以了解 :checked 过滤器的几种用法。

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="hidden">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // Alerts "true"
      alert($('input').is(':hidden'));
      // Or, added to wrapper set if hidden. Alerts "1"
      alert($('input:hidden').length);
  })(jQuery); </script>
</body>
</html>

设置/获取输入元素的值

val() 方法可用于设置和获取输入元素的属性值（按钮、复选框、隐藏、图像、密码、单选、重置、提交、文本）。下面，我在 val() 中设置每个输入的值，然后使用 val() 方法提醒该值。

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="button">
    <input type="checkbox">
    <input type="hidden">
    <input type="image">
    <input type="password">
    <input type="radio">
    <input type="reset">
    <input type="submit">
    <input type="text">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      $('input:button').val('I am a button');
      $('input:checkbox').val('I am a check box');
      $('input:hidden').val('I am a hidden input');
      $('input:image').val('I am an image');
      $('input:password').val('I am a password');
      $('input:radio').val('I am a radio');
      $('input:reset').val('I am a reset');
      $('input:submit').val('I am a submit');
      $('input:text').val('I am a text');
      // Alerts input's value attribute
      alert($('input:button').val());
      alert($('input:checkbox').val());
      alert($('input:hidden').val());
      alert($('input:image').val());
      alert($('input:password').val());
      alert($('input:radio').val());
      alert($('input:reset').val());
      alert($('input:submit').val());
      alert($('input:text').val());
  })(jQuery); </script>
</body>
</html>

设置/获取选择元素的选定选项

使用 val() 方法，您可以通过向 val() 方法传递一个表示分配给 <option><select></select></option> 元素的选定值> 元素。

要获取 <select></select> 元素的值，请再次使用 val() 方法来确定选择哪个选项。此场景中的 val() 方法将返回所选选项的属性值。

<!DOCTYPE html>
<html lang="en">
<body>
    <select id="s" name="s">
        <option value="option1">option one</option>
        <option value="option2">option two</option>
    </select>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // Set the selected option in the select element to "option two"
      $('select').val('option2');
      // Alerts "option2"
      alert($('select').val());
  })(jQuery); </script>
</body>
</html>

设置/获取多选元素的选定选项

使用 val() 方法，我们可以通过向 val() 方法传递一个包含相应值的数组来设置多选元素的选定值。

为了获取多选元素中的选定选项，我们再次使用 val() 方法来检索所选选项的数组。该数组将包含所选选项的值属性。

<!DOCTYPE html>
<html lang="en">
<body>
    <select size="4" multiple="multiple">
        <option value="option1">option one</option>
        <option value="option2">option two</option>
        <option value="option3">option three</option>
        <option value="option4">option four</option>
    </select>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){ 
      // Set the value of the selected options
      $('select').val(['option2', 'option4']);  
      // Get the selected values
      alert($('select').val().join(', ')); // Alerts, "option2, option4" 
  })(jQuery); </script>
</body>
</html>

设置/获取中包含的文本

您可以通过向 val() 方法传递一个要用作文本的文本字符串来设置 <textarea></textarea> 元素的文本节点内容。为了获取 <textarea></textarea> 元素的值，我们再次使用 val() 方法来检索其中包含的文本。

<!DOCTYPE html>
<html lang="en">
<body>
    <textarea></textarea>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // Set the text contained within
      $('textarea').val('I am a textarea');
      // Alerts "I am a textarea"
      alert($('textarea').val());
  })(jQuery); </script>
</body>
</html>

设置/获取按钮元素的值属性

您可以通过向 val() 方法传递一个文本字符串来设置按钮元素的 value 属性。要获取按钮元素的值，请再次使用 val() 方法来检索文本。

<!DOCTYPE html>
<html lang="en">
<body>
    <button>Button</button>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function ($) {
      // Set the value: <button value="I am a Button Element">
      $('button').val('I am a Button Element')
      // Alerts "I am a Button Element"
      alert($('button').val());
  })(jQuery); </script>
</body>
</html>

编辑选择元素

jQuery 使一些与编辑选择元素相关的常见任务变得微不足道。以下是其中一些带有编码示例的任务。

// Add options to a select element at the end
$('select').append('<option value="">option</option>');
// Add options to the start of a select element
$('select').prepend('<option value="">option</option>');
// Replace all the options with new options
$('select').html('<option value="">option</option><option value="">option</option>');
// 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('<option value="">option</option>');
// 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('<option value="">option</option>');
// Insert an option before a particular position
$('select option:eq(3)').before('<option value="">option</option>');

按类型选择表单元素

可以按类型选择表单元素，例如$('输入:复选框')

🎜

<!DOCTYPE html>
<html lang="en">
<body>
    <input type="button" value="Input Button">
    <input type="checkbox">
    <input type="file">
    <input type="hidden">
    <input type="image">
    <input type="password">
    <input type="radio">
    <input type="reset">
    <input type="submit">
    <input type="text">
    <select>
        <option>Option</option>
    </select>
    <textarea></textarea>
    <button>Button</button>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){ 
      // Alerts "13" form elements
      alert($(':input').length);
  })(jQuery); </script>
</body>
</html>

🎜Untuk mendayakan elemen borang yang dilumpuhkan, kami hanya menggunakan removeAttr() untuk mengalih keluar atribut yang dilumpuhkan, atau gunakan attr() untuk menetapkan nilai atribut yang dilumpuhkan kepada null. 🎜 rrreee

🎜Bagaimana untuk menentukan sama ada elemen borang dilumpuhkan atau didayakan🎜 🎜Gunakan ungkapan penapis borang jQuery :disabled atau :enabled, untuk memilih dan menentukan (boolean) dengan mudah sama ada elemen borang dilumpuhkan atau didayakan. Semak kod di bawah untuk penjelasan. 🎜 rrreee

🎜Pilih/kosongkan kotak pilihan individu atau butang radio🎜 🎜Anda boleh memilih input butang radio atau kotak pilihan dengan menetapkan atribut checkednya kepada true menggunakan attr(). 🎜 rrreee 🎜Untuk mengosongkan input atau kotak pilihan butang radio, hanya gunakan kaedah removeAttr() untuk mengalih keluar atribut yang diperiksa atau tetapkan nilai atribut checked kepada rentetan kosong. 🎜 rrreee

🎜Pilih/kosongkan berbilang kotak pilihan atau input butang radio🎜 🎜Anda boleh menggunakan val() jQuery pada berbilang input kotak semakan atau input butang radio untuk menetapkan input untuk diperiksa. Ini dilakukan dengan menghantar kaedah val() tatasusunan yang mengandungi rentetan yang konsisten dengan input kotak semak atau atribut nilai input butang radio. 🎜 rrreee 🎜Nota: Menggunakan val() tidak akan mengosongkan elemen input jika kotak semak atau butang radio ditandakan. 🎜

🎜Tentukan sama ada kotak semak atau butang radio ditanda atau dikosongkan🎜 🎜Kami boleh menggunakan penapis borang :checked untuk menentukan sama ada input kotak pilihan atau input butang radio ditandakan atau dikosongkan. Semak kod di bawah untuk melihat beberapa kegunaan penapis :checked. 🎜 rrreee

🎜Bagaimana untuk menentukan sama ada unsur bentuk disembunyikan🎜 🎜Anda boleh menggunakan penapis borang :hidden untuk menentukan sama ada elemen borang disembunyikan. Semak kod di bawah untuk melihat beberapa kegunaan penapis :checked. 🎜 rrreee

🎜Tetapkan/dapatkan nilai elemen input🎜 Kaedah 🎜val() boleh digunakan untuk menetapkan dan mendapatkan nilai atribut elemen input (butang, kotak semak, tersembunyi, imej, kata laluan, radio, tetapkan semula, serahkan, teks). Di bawah, saya menetapkan nilai setiap input dalam val() dan kemudian menggunakan kaedah val() untuk memaklumkan nilai tersebut. 🎜 rrreee

🎜Tetapkan/dapatkan pilihan terpilih bagi elemen yang dipilih🎜 🎜Menggunakan kaedah val(), anda boleh menetapkan val() rentetan yang mewakili nilai yang diberikan kepada <option nilai yang dipilih bagi elemen select></option> element>. 🎜 🎜Untuk mendapatkan nilai elemen <select></select>, gunakan kaedah val() sekali lagi untuk menentukan pilihan yang dipilih. Kaedah val() dalam senario ini akan mengembalikan nilai atribut pilihan yang dipilih. 🎜 rrreee

🎜Tetapkan/dapatkan pilihan elemen berbilang pilihan🎜 🎜Menggunakan kaedah val(), kita boleh menetapkan nilai yang dipilih bagi elemen berbilang pilih dengan menghantar tatasusunan yang mengandungi nilai yang sepadan kepada kaedah val() . 🎜 🎜Untuk mendapatkan pilihan yang dipilih dalam elemen berbilang pilih, kami sekali lagi menggunakan kaedah val() untuk mendapatkan semula tatasusunan pilihan yang dipilih. Tatasusunan akan mengandungi atribut nilai bagi pilihan yang dipilih. 🎜 rrreee

🎜Tetapkan/dapatkan teks yang terkandung dalam

🎜
🎜Anda boleh menetapkan kandungan nod teks bagi elemen <code><textarea></textarea></code> dengan menghantar rentetan teks untuk digunakan sebagai teks kepada kaedah <code>val()</code>. Untuk mendapatkan nilai elemen <code><textarea></textarea></code>, kami sekali lagi menggunakan kaedah <code>val()</code> untuk mendapatkan semula teks yang terkandung di dalamnya. 🎜
rrreee
<hr>
🎜Tetapkan/dapatkan atribut nilai elemen butang🎜
🎜Anda boleh menetapkan atribut nilai elemen butang dengan menghantar rentetan teks ke kaedah <code>val()</code>. Untuk mendapatkan nilai elemen butang, gunakan kaedah <code>val()</code> sekali lagi untuk mendapatkan semula teks. 🎜
rrreee
<hr>
🎜Elemen Pilihan Editorial🎜
🎜jQuery menjadikan beberapa tugas biasa yang berkaitan dengan penyuntingan elemen pemilihan menjadi remeh. Di bawah ialah beberapa tugasan ini dengan contoh pengekodan. 🎜
rrreee
<hr>
🎜Pilih elemen borang mengikut jenis🎜
🎜Anda boleh memilih elemen borang mengikut jenis, seperti <code>$('Input: Checkbox')</code> jQuery menyediakan penapis jenis borang berikut untuk memilih elemen borang mengikut jenis. 🎜
<ul>
<li><code>:text</code></li>
<li><code>:密码</code></li>
<li><code>:radio</code></li>
<li><code>:checkbox</code></li>
<li><code>:提交</code></li>
<li><code>:image</code></li>
<li><code>:重置</code></li>
<li><code>:file</code></li>
<li><code>:button</code></li>
</ul>
<hr>
<h2>选择所有表单元素</h2>
<p>您可以使用 <code>:input</code> 表单过滤器选择所有表单元素。此过滤器不仅会选择输入元素，还会选择任何 <code><textarea></textarea></code>、<code><select></select></code> 或 <code><button></button></code> 元素。在下面的编码示例中，请注意使用 <code>:input</code> 过滤器时包装器集的长度。</p>
<pre class="brush:html;toolbal:false;">
<!DOCTYPE html>
<html lang="en">
<body>
    <input type="button" value="Input Button">
    <input type="checkbox">
    <input type="file">
    <input type="hidden">
    <input type="image">
    <input type="password">
    <input type="radio">
    <input type="reset">
    <input type="submit">
    <input type="text">
    <select>
        <option>Option</option>
    </select>
    <textarea></textarea>
    <button>Button</button>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>  (function($){ 
      // Alerts "13" form elements
      alert($(':input').length);
  })(jQuery); </script>
</body>
</html>
</pre>

Atas ialah kandungan terperinci jQuery yang ringkas dan mudah difahami: Borang HTML dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery html checkbox 字符串 input

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Laksanakan skrip apabila bar skrol elemen HTML ditatal?Artikel seterusnya：Laksanakan skrip apabila bar skrol elemen HTML ditatal?

Artikel berkaitan

Lihat lagi