2024.09.18

jQuery使い方まとめ

この記事を書いたチーム：tenko

インストール

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

値(value)の取得

var value = $('#id名').val();

1	var value = $('#id名').val();

値(value)の変更

$('#id名').val('変更後の値');

1	$('#id名').val('変更後の値');

選択している値(value)の取得

var value = $('#id名').val();

1	var value = $('#id名').val();

選択している値の表示テキストを取得

var text $('[id=id名] option:selected').text();

1	var text $('[id=id名] option:selected').text();

選択している値(value)の変更

$('#id名').val('変更後の値');

1	$('#id名').val('変更後の値');

選択項目(option)をすべて削除

$('#id名').children().remove();

1	$('#id名').children().remove();

値(value)を指定して選択項目(option)を削除

$('#id名').children('option[value=値]').remove();

1	$('#id名').children('option[value=値]').remove();

チェック状態を取得（ONの場合はtrue、OFFの場合はfalseを取得）

var checked = $('#id名').prop('checked');

1	var checked = $('#id名').prop('checked');

チェック状態を変更する

$('#id名').prop('checked', true);            // チェック状態をONに変更

$('#id名').prop('checked', false);           // チェック状態をOFFに変更

$('#id名').prop('checked', true); // チェック状態をONに変更

$('#id名').prop('checked', false); // チェック状態をOFFに変更