jquery操作のラジオボタン、チェックボックス、ドロップダウンリストの実装 code_jquery

1. チェックボックスの選択操作: 実際には、Jquery セレクターを使用します。ここをクリックして Jquery セレクターを表示します。
HTML コード:

コードをコピーします。 > コードは次のとおりです:

あなたの好きなスポーツは次のとおりです:
サッカー
バスケットボール
バドミントン
ピンポン



Jquey js スクリプト:

コードをコピー コードは次のとおりです: $('# checkAll'). click (checkAll); // すべてを選択します

$('#checkFootball').click (checkFootball) // サッカーのみを選択します

関数 checkAll()
{
$('input [type="checkbox"][name="item"]').attr ("checked", true); checkbox'). attr("checked", true);
}


注: 選択を反転するには、ここで true を false に置き換えます。
サッカー操作を選択
Jquey js スクリプト:

コードをコピー

コードは次のとおりです: function checkFootball() { $(" [name='item']:checkbox").each(function () {

if (this.value == 'フットボール')

{
this.checked = true;
}
})
}


注: 特定の目的は、バックグラウンドからデータを取得して表示することです。 。ここでは、選択を設定して現在のチェックボックスの値を取得するために jQuery の attr() メソッドと val() メソッドを使用しません。代わりに、jQuery オブジェクトを作成するよりも効率的な JavaScript のネイティブ Dom メソッドを使用します
2。ラジオボタン操作
html コード:

コードをコピー

コードは次のとおりです: A B C D どれを選びますか: A B

C

D



選択した文字 B を初期化
Jquey jsスクリプト:

コードをコピー

コードは次のとおりです: $(document).ready( function() { // データ初期化 B を選択します。$('[name="item"]:radio').each(function() {

if (this.value == 'B ')

{
this.checked = true;
}
});
// 文字を取得するイベントをバインドします
$('#getLetter').click( getLetter);
});


選択した文字を取得します
Jquey js スクリプト:

コードをコピーします🎜>
コードは次のとおりです:

function getLetter() { alert('取得された文字は次のとおりです:' $('[name="item"] [checked=true]:radio').val()) ; }

3. ドロップダウン ボックス (リスト) 操作




コードをコピー

コードは次のとおりです:

Jquey js スクリプト:




コードをコピーします

コードは次のとおりです:

$(document).ready(function() {
$('#addOptions').click(addOptions); // リストに要素を追加します
$('#getSelectedOption') . click(getSelectedOption); // 選択された要素を取得します
$('#clearOptions').click(clearOptions); // リスト内の要素をクリアします
$('#addOptions').click() ; // リストへの要素の追加イベントをトリガーします
})

要素の追加
Jquey js スクリプト:

コードをコピーします コードは次のとおりです。

function addOptions()
{
var selectContainer = $('#choose'); >for (var i = 0 ; i {
var オプション = $('').text('choose' i).val( i);
selectContainer .append(option);
}
}

選択された要素を取得します

code コードは次のとおりです:

function getSelectedOption()
{
/* 各要素を 1 つずつポップします*/
var options = $('#choose > オプション: 選択済み');
$.each(options, function () {
alert('option: ' this.value);
}); >/* 各要素を 1 つずつポップし、最初に種の略語を付けます*/
$('#choose > option:selected').each(function() {
alert('option2: ' this.value );
});
// ドロップダウン ボックスの場合、データを直接ポップアップします。
// データ',' で区切って表示されます。
alert('val: ' $('#choose').val());
}


リストをクリアします

コードをコピーします コードは次のとおりです:

function clearOptions()

{
$( '#choose').empty();
}


一般的に使用される:

コードをコピー コードは次のとおりです:

var ddl = $("# ddlDiaryType option:selected").text();//ドロップダウン リスト

var reb = $(" #RbIfprivate [checked=true]:radio").val();//ラジオボタン