Résumé des méthodes de contrôle courantes pour l'opération jQuery Forms

Résumé des méthodes de contrôle courantes pour l'opération jQuery Forms_jquery

WBOY

Libérer： 2016-05-16 16:07:58

original

1020 Les gens l'ont consulté

Les exemples de cet article résument les méthodes de contrôle courantes des formulaires d'exploitation jQuery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Le code JS suivant répertorie les méthodes courantes permettant à jQuery d'opérer des contrôles courants sur les formulaires (y compris la sélection, la radiobox, la case à cocher. Je pense qu'il doit y avoir ce dont vous avez besoin

Code HTML pour le fonctionnement de la 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" />

Copier après la connexion

1. Récupérez la valeur sélectionnée, trois méthodes sont disponibles :

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

Copier après la connexion

2. Définissez la première radio comme valeur sélectionnée :

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

Copier après la connexion

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

Copier après la connexion

Remarque :

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

Copier après la connexion

3. Définissez la dernière radio comme valeur sélectionnée :

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

Copier après la connexion

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

Copier après la connexion

4. Définissez n'importe quelle radio comme valeur sélectionnée en fonction de la valeur d'index :

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

Copier après la connexion

Valeur de l'indice=0,1,2....
ou

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

Copier après la connexion

5. Définissez Radio comme valeur sélectionnée en fonction de la valeur Valeur

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

Copier après la connexion

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

Copier après la connexion

6. Supprimez la radio dont la valeur est rd2

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

Copier après la connexion

7. Quelle radio supprimer

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

Copier après la connexion

Valeur de l'indice=0,1,2....
Si vous souhaitez supprimer la 3ème Radio :

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

Copier après la connexion

8. Traversée Radio

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

Copier après la connexion

Le code suivant démontre les méthodes de fonctionnement courantes de 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>

Copier après la connexion

1. Obtenez la valeur de l'élément sélectionné :

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

Copier après la connexion

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

Copier après la connexion

Obtenir la valeur Texte de l'élément sélectionné :

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

Copier après la connexion

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

Copier après la connexion

2. Obtenez la valeur d'index de l'élément actuellement sélectionné :

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

Copier après la connexion

3. Obtenez la valeur d'index maximale de l'option actuelle :

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

Copier après la connexion

4. Obtenez la longueur de DropdownList :

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

Copier après la connexion

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

Copier après la connexion

5. Définissez la première option comme valeur sélectionnée :

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

Copier après la connexion

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

Copier après la connexion

6. Définissez la dernière option comme valeur sélectionnée :

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

Copier après la connexion

7. Définissez n'importe quelle option comme valeur sélectionnée en fonction de la valeur d'index :

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

Copier après la connexion

Valeur de l'indice=0,1,2....
8. Définissez l'option avec Value=4 comme valeur sélectionnée :

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

Copier après la connexion

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

Copier après la connexion

9. Supprimez l'option avec Value=3 :

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

Copier après la connexion

10. Quelle option doit être supprimée :

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

Copier après la connexion

Valeur de l'indice=0,1,2....
Si vous souhaitez supprimer la 3ème Radio :

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

Copier après la connexion

11. Supprimez la première option :

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

Copier après la connexion

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

Copier après la connexion

12. Supprimez la dernière option :

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

Copier après la connexion

13. Supprimer la liste déroulante :

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

Copier après la connexion

14. Ajoutez une option après avoir sélectionné :

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

Copier après la connexion

15. Ajoutez une option devant select :

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

Copier après la connexion

16. Options de traversée :

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

Copier après la connexion

Le code suivant illustre les méthodes courantes de jQuery pour utiliser les cases à cocher

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" />

Copier après la connexion

1. Obtenez une seule case à cocher pour l'élément sélectionné (trois méthodes d'écriture) :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

2. Obtenez plusieurs éléments sélectionnés par case à cocher :

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

Copier après la connexion

3. Cochez la première case comme valeur sélectionnée :

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

Copier après la connexion

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

Copier après la connexion

4. Cochez la dernière case comme valeur sélectionnée :

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

Copier après la connexion

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

Copier après la connexion

5. Définissez n'importe quelle case à cocher comme valeur sélectionnée en fonction de la valeur d'index :

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

Copier après la connexion

Valeur de l'indice=0,1,2....
ou

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

Copier après la connexion

6. Cochez plusieurs cases :
Cochez la 1ère et la 2ème cases en même temps :

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

Copier après la connexion

7. Cochez la case sur la valeur sélectionnée en fonction de la valeur Valeur :

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

Copier après la connexion

8. Supprimez la case avec Value=1 :

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

Copier après la connexion

9. Quelle case à cocher supprimer :

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

Copier après la connexion

Valeur de l'indice=0,1,2....
Pour supprimer la troisième case à cocher :

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

Copier après la connexion

10.遍历checkbox：

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

Copier après la connexion

11.全部选中

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

Copier après la connexion

12.全部取消选择：

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

Copier après la connexion

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