Ringkasan kaedah kawalan biasa untuk operasi jQuery forms_jquery

Contoh dalam artikel ini meringkaskan kaedah kawalan biasa bagi borang pengendalian jQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Kod JS berikut menyenaraikan kaedah biasa untuk jQuery untuk mengendalikan kawalan biasa pada borang (termasuk pilih, kotak radio, kotak pilihan saya percaya mesti ada apa yang anda perlukan

).

Kod HTML untuk pengendalian radio

Radion
<input type="radio" name="rd" id="rd1" checked="checked" value="rd1" />
<input type="radio" name="rd" id="rd2" value="rd2" />
<input type="radio" name="rd" id="rd3" value="rd3" />

1. Dapatkan nilai yang dipilih, tiga kaedah tersedia:

$('input:radio:checked').val();
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();

2. Tetapkan Radio pertama sebagai nilai yang dipilih:

$('input:radio:first').attr('checked', 'checked');

atau

$('input:radio:first').attr('checked', 'true');

Nota:

attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)

3. Tetapkan Radio terakhir sebagai nilai yang dipilih:

$('input:radio:last').attr('checked', 'checked');

atau

$('input:radio:last').attr('checked', 'true');

4. Tetapkan mana-mana radio sebagai nilai yang dipilih mengikut nilai indeks:

$('input:radio').eq(索引值).attr('checked', 'true');

Nilai indeks=0,1,2....
atau

$('input:radio').slice(1,2).attr('checked', 'true');

5. Tetapkan Radio sebagai nilai yang dipilih mengikut nilai Nilai

$("input:radio[value='rd2']").attr('checked','true');

atau

$("input[value='rd2']").attr('checked','true');

6. Padamkan Radio yang Nilainya rd2

$("input:radio[value='rd2']").remove();

7. Radio mana yang hendak dipadamkan

$("input:radio").eq(索引值).remove();

Nilai indeks=0,1,2....
Jika anda ingin memadamkan Radio ke-3:

$("input:radio").eq(2).remove();

8. Radio Traverse

$('input:radio').each(function(index,domEle){
//写入代码
});

Kod berikut menunjukkan kaedah operasi biasa DropDownList

DropDownList
<select id="sel">
<option value="1" selected="selected">a</option>
<option value="2">b</option>
<option value="3">c</option>
<option value="4">d</option>
<option value="5">e</option>
</select>

1. Dapatkan Nilai item yang dipilih:

$('select#sel option:selected').val();

atau

$('select#sel').find('option:selected').val();

Dapatkan nilai Teks item yang dipilih:

$('select#seloption:selected').text();

atau

$('select#sel').find('option:selected').text();

2. Dapatkan nilai indeks item yang dipilih sekarang:

$('select#sel').get(0).selectedIndex;

3. Dapatkan nilai indeks maksimum bagi pilihan semasa:

$('select#sel option:last').attr("index")

4. Dapatkan panjang Senarai Turun:

$('select#sel')[0].options.length;

atau

$('select#sel').get(0).options.length;

5. Tetapkan pilihan pertama sebagai nilai yang dipilih:

$('select#sel option:first').attr('selected','true')

atau

$('select#sel')[0].selectedIndex = 0;

6. Tetapkan pilihan terakhir sebagai nilai yang dipilih:

$('select#sel option:last).attr('selected','true')

7. Tetapkan sebarang pilihan sebagai nilai yang dipilih berdasarkan nilai indeks:

$('select#sel')[0].selectedIndex =索引值;

Nilai indeks=0,1,2....
8. Tetapkan pilihan dengan Nilai=4 sebagai nilai yang dipilih:

$('select#sel').attr('value','4');

atau

$("select#sel option[value='4']").attr('selected', 'true');

9. Padamkan pilihan dengan Nilai=3:

$("select#sel option[value='3']").remove();

10. Pilihan yang manakah harus dipadamkan:

$(" select#sel option ").eq(索引值).remove();

Nilai indeks=0,1,2....
Jika anda ingin memadamkan Radio ke-3:

$(" select#sel option ").eq(2).remove();

11. Padamkan pilihan pertama:

$(" select#sel option ").eq(0).remove();

atau

$("select#sel option:first").remove();

12. Padamkan pilihan terakhir:

$("select#sel option:last").remove();

13. Padam senarai jatuh turun:

$("select#sel").remove();

14. Tambah pilihan selepas pilih:

$("select#sel").append("<option value='6'>f</option>");

15. Tambahkan pilihan di hadapan pilihan:

$("select#sel").prepend("<option value='0'>0</option>");

16 Pilihan lintasan:

$(' select#sel option ').each(function (index, domEle) {
//写入代码
});

Kod berikut menunjukkan kaedah biasa jQuery untuk mengendalikan kotak semak

CheckBox
<input type="checkbox" id="ck1" name="ck" vlaue="1" checked="checked" />
<input type="checkbox" id="ck2" name="ck" vlaue="2" />
<input type="checkbox" id="ck3" name="ck" vlaue="3" />
<input type="checkbox" id="ck4" name="ck" vlaue="4" />

1. Dapatkan satu kotak pilihan item yang dipilih (tiga kaedah penulisan):

$("input:checkbox:checked").val()

atau

$("input:[type='checkbox']:checked").val();

atau

$("input:[name='ck']:checked").val();

2. Dapatkan berbilang kotak pilihan item yang dipilih:

$('input:checkbox').each(function() {
if ($(this).attr('checked') ==true) {
alert($(this).val());
}
});

3. Tetapkan kotak semak pertama sebagai nilai yang dipilih:

$('input:checkbox:first').attr("checked",'checked');

atau

$('input:checkbox').eq(0).attr("checked",'true');

4. Tetapkan kotak pilihan terakhir sebagai nilai yang dipilih:

$('input:radio:last').attr('checked', 'checked');

atau

$('input:radio:last').attr('checked', 'true');

5. Tetapkan mana-mana kotak pilihan sebagai nilai yang dipilih berdasarkan nilai indeks:

$('input:checkbox).eq(索引值).attr('checked', 'true');

Nilai indeks=0,1,2....
atau

$('input:radio').slice(1,2).attr('checked', 'true');

6. Pilih berbilang kotak pilihan:
Pilih kotak pilihan pertama dan kedua pada masa yang sama:

$('input:radio').slice(0,2).attr('checked','true');

7. Tetapkan kotak semak kepada nilai yang dipilih berdasarkan nilai Nilai:

$("input:checkbox[value='1']").attr('checked','true');

8. Padamkan kotak pilihan dengan Nilai=1:

$("input:checkbox[value='1']").remove();

9. Kotak semak yang manakah hendak dipadamkan:

$("input:checkbox").eq(索引值).remove();

Nilai indeks=0,1,2....
Untuk memadam kotak semak ketiga:

$("input:checkbox").eq(2).remove();

10.遍历checkbox：

$('input:checkbox').each(function (index, domEle) {
//写入代码
});

11.全部选中

$('input:checkbox').each(function() {
$(this).attr('checked', true);
});

12.全部取消选择：

$('input:checkbox').each(function () {
$(this).attr('checked',false);
});

希望本文所述对大家的jQuery程序设计有所帮助。