ホームページ >ウェブフロントエンド >jsチュートリアル >JQuery が 3 つの主要なコントロール (ドロップダウン、ラジオ選択、チェック選択) を操作する方法_jquery

JQuery が 3 つの主要なコントロール (ドロップダウン、ラジオ選択、チェック選択) を操作する方法_jquery

WBOY
WBOYオリジナル
2016-05-16 17:26:30989ブラウズ
コードをコピー コードは次のとおりです:

ラジオ



1. 選択された値を取得します。次の 3 つのメソッドが利用可能です:
$('input:radio:checked').val();
$("input[type='radio']:checked") .val();
$("input[name='rd']:checked").val();
2. 最初のラジオを選択した値として設定します:
$('input: radio:first').attr('checked', 'checked');
または
$('input:radio:first').attr('checked', 'true'); :attr("checked",'checked')= attr("checked", 'true')= attr("checked",true)
3. 最後のラジオを選択した値として設定します:
$( ' input:radio:last').attr('checked', 'checked');
または
$('input:radio:last').attr('checked', 'true'); 🎜 >4. インデックス値に従って任意の無線を選択された値として設定します:
$('input:radio').eq(index value).attr('checked', 'true'); ,1, 2....
または
$('input:radio').slice(1,2).attr('checked', 'true'); 5. ラジオを設定します。チェックされた値
$("input:radio[value='rd2']").attr('checked','true');
or
$("input[value='rd2'] ").attr('checked','true');
6. 値が rd2 である無線を削除します
$("input:radio[value='rd2']").remove();
7. どのラジオを削除するか
$("input:radio").eq(index value).remove(); Index value=0,1,2....
たとえば、 3 番目のラジオ:$("input:radio").eq(2).remove();
8. トラバース ラジオ
$('input:radio').each(function(index,domEle){
//コードを書きます
});
DropDownList

1. ( 'select#sel option:selected').val();
または
$('select#sel').find('option:selected').val(); item テキスト値:
$('select#seloption:selected').text();
または
$('select#sel').find('option:selected').text() ;
2. 現在選択されている項目のインデックス値を取得します:
$('select#sel').get(0).selectedIndex;
3. 現在のオプションの最大インデックス値を取得します。
$( 'select#sel option:last').attr("index")
4. DropdownList の長さを取得します:
$('select#sel')[0].options.length ;
または
$('select#sel').get(0).options.length;
5. 最初のオプションを選択された値として設定します:
$('select#sel オプション) :first').attr ('selected','true')
または
$('select#sel')[0].selectedIndex = 0; 6. 最後のオプションを選択済みに設定します。値:
$( 'select#sel option:last).attr('selected','true')
7. インデックス値に基づいて、任意のオプションを選択された値として設定します:
$(' select#sel')[0]. selectedIndex = インデックス値 = 0,1,2....
8. Value=4 を選択値として設定します:
$('select #sel').attr('value', '4');
または
$("select#sel オプション[value='4']").attr('selected', 'true') ;
9. Value=3 オプションを削除します:
$("select#sel option[value='3']").remove();
10. 最初のオプションを削除します:
$ (" select#sel オプション ").eq(index value).remove();
3 番目のラジオを削除するには:
$(" select#sel オプション").eq(2).remove();
11. 最初のオプションを削除します:
$(" select#sel option ").eq(0).remove();
または
$("select#sel option:first").remove();
12. 最後のオプションを削除します:
$("select#sel option:last").remove(); . ドロップダウンリストを削除します:
$("select#sel").remove();
14. select の後にオプションを追加します:
$("select#sel").append("");
15. select の前にオプションを追加します:
$("select#sel").prepend(" ");
16. オプションのトラバース:
$(' select#sel option ').each(function (index, domEle) {
//コードを書きます
});
チェックボックス
checkbox" id="ck2 " name="ck" vlaue="2" />


1. チェックボックスで選択された項目を 1 つ取得します (3 つの書き込み方法):
$( "input:checkbox:checked" ).val()
or
$("input:[type='checkbox']:checked").val();
or
$(" input:[name='ck ']:checked").val();
2. 複数のチェックボックスで選択された項目を取得します:
$('input:checkbox').each(function() {
if ($(this) .attr('checked') ==true) {
alert($(this).val())
}
});
3. 最初のチェックボックスを選択した値として設定します:
$('input:checkbox:first').attr("checked",'checked'); 'input:checkbox').eq(0).attr("checked",'true');
4. 最後のチェックボックスを選択した値として設定します:
$('input:radio:last') . attr('checked', 'checked');
または
$('input:radio:last').attr('checked', 'true'); 5.インデックス値について チェックボックスは選択された値です:
$('input:checkbox).eq(index value).attr('checked', 'true'); .
または
$('input:radio').slice(1,2).attr('checked', 'true');
6. 複数のチェックボックスを選択します。 1 番目のチェックボックスと同時に 2 つのチェックボックス:
$('input:radio').slice(0,2).attr('checked','true'); 7. チェックボックスを に設定します。 Value 値に従って選択された値:
$("input:checkbox[value='1']").attr('checked','true'); Value=1 のチェックボックスを削除します。 :
$("input:checkbox [value='1']").remove();
9. どのチェックボックスを削除しますか:
$("input:checkbox").eq(index value) .remove(); インデックス値 = 0,1,2....
3 番目のチェックボックスを削除するには:
$("input:checkbox").eq(2).remove(); 10. チェックボックスを移動します:
$('input:checkbox').each(function (index, domEle) {
//コードを書きます
});
すべてを選択します
$('input:checkbox' ).each(function() {
$(this).attr('checked', true);
}); すべての選択を解除します:
$ ('input:checkbox' ).each(function () {
$(this).attr('checked',false);
});
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。