Heim >Web-Frontend >js-Tutorial >Zusammenfassung gängiger Steuerungsmethoden für den jQuery-Vorgang „forms_jquery'.

Zusammenfassung gängiger Steuerungsmethoden für den jQuery-Vorgang „forms_jquery'.

WBOY
WBOYOriginal
2016-05-16 16:07:581031Durchsuche

Die Beispiele in diesem Artikel fassen die gängigen Steuerungsmethoden von jQuery-Betriebsformen zusammen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Der folgende JS-Code listet gängige Methoden für jQuery auf, um allgemeine Steuerelemente auf Formularen auszuführen (einschließlich Select, Radiobox, Checkbox). Ich glaube, da muss das sein, was Sie brauchen

HTML-Code für den Funkbetrieb

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. Rufen Sie den ausgewählten Wert ab. Es stehen drei Methoden zur Verfügung:

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

2. Stellen Sie das erste Radio als ausgewählten Wert ein:

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

oder

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

Hinweis:

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

3. Stellen Sie das letzte Radio als ausgewählten Wert ein:

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

oder

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

4. Stellen Sie ein beliebiges Radio entsprechend dem Indexwert als ausgewählten Wert ein:

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

Indexwert=0,1,2....
oder

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

5. Stellen Sie Radio entsprechend dem Wert
als ausgewählten Wert ein

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

oder

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

6. Löschen Sie das Radio, dessen Wert rd2 ist

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

7. Welches Radio gelöscht werden soll

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

Indexwert=0,1,2....
Wenn Sie das 3. Radio löschen möchten:

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

8. Traverse Radio

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

Der folgende Code demonstriert die allgemeinen Betriebsmethoden von 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. Ermitteln Sie den Wert des ausgewählten Elements:

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

oder

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

Erhalten Sie den Textwert des ausgewählten Elements:

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

oder

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

2. Rufen Sie den Indexwert des aktuell ausgewählten Elements ab:

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

3. Ermitteln Sie den maximalen Indexwert der aktuellen Option:

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

4. Ermitteln Sie die Länge der Dropdown-Liste:

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

oder

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

5. Legen Sie die erste Option als ausgewählten Wert fest:

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

oder

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

6. Legen Sie die letzte Option als ausgewählten Wert fest:

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

7. Legen Sie eine beliebige Option als ausgewählten Wert basierend auf dem Indexwert fest:

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

Indexwert=0,1,2....
8. Legen Sie die Option mit Wert=4 als ausgewählten Wert fest:

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

oder

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

9. Löschen Sie die Option mit Wert=3:

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

10. Welche Option soll gelöscht werden:

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

Indexwert=0,1,2....
Wenn Sie das 3. Radio löschen möchten:

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

11. Löschen Sie die erste Option:

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

oder

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

12. Löschen Sie die letzte Option:

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

13. Dropdown-Liste löschen:

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

14. Fügen Sie nach der Auswahl eine Option hinzu:

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

15. Fügen Sie vor „Auswählen“ eine Option hinzu:

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

16. Traverse-Optionen:

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

Der folgende Code demonstriert die gängigen Methoden von jQuery zum Bedienen von Kontrollkästchen

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. Ein einzelnes Kontrollkästchen auswählen (drei Schreibmethoden):

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

oder

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

oder

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

2. Mehrere durch Kontrollkästchen ausgewählte Elemente abrufen:

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

3. Legen Sie das erste Kontrollkästchen als ausgewählten Wert fest:

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

oder

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

4. Setzen Sie das letzte Kontrollkästchen als ausgewählten Wert:

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

oder

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

5. Legen Sie ein beliebiges Kontrollkästchen basierend auf dem Indexwert als ausgewählten Wert fest:

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

Indexwert=0,1,2....
oder

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

6. Aktivieren Sie mehrere Kontrollkästchen:
Aktivieren Sie gleichzeitig das 1. und 2. Kontrollkästchen:

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

7. Setzen Sie das Kontrollkästchen auf den ausgewählten Wert basierend auf dem Wert:

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

8. Löschen Sie das Kontrollkästchen mit Wert=1:

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

9. Welches Kontrollkästchen gelöscht werden soll:

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

Indexwert=0,1,2....
Um das dritte Kontrollkästchen zu löschen:

$("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程序设计有所帮助。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn