【javascript】【jquery】のセレクタ関連

イベント内で処理を行う

クリックされたら
$('input[name="user_name"]').on('click',function(){ //処理 });

$('input[type="radio"]').on('change', function() {  //処理 });

$('label input[type="checkbox"]').click(function() {  //処理 });

$('button[name="img_select"]').change(function() {  //処理 });

ドロップリストやラジオボタンが変更されたら
$('select[name="user_name"]').on('change', function() { //処理 });

    

入力または削除がされたら
$('input[name="user_name"]').on('input', function() { //処理 });
    

判定

チェックされていたら
if ($(this).is(':checked')) {
    //処理
} 
チェックが外れてたら
if (!$(this).is(':checked')) {
    //処理
}

イベントを起こす

チェックする
$('input[name="user_name"]').prop('checked', true);
チェック外す
$('input[name="user_name"]').prop('checked', false);

入力を不可にする
 $('input[name="user_name"]').prop('disabled', true);
入力を不可から可能
 $('input[name="user_name"]').prop('disabled', false);

idに値をセット
$('input[name="user_name"]').attr('id',0);

変数にidの値を追加
id = $('input[name="user_name"]').attr('id');

valueに値をセット
$('input[name="user_name"]').val();

変数にvalueの値を追加
val = $('input[name="user_name"]').val('0');

セレクタ指定

現在 選択されているドロップダウンリストを選択
$('select[name="user_name"]').prop("selectedIndex");

一つ目のセレクタ
$('input[name="user_name"]').eq(0);

$('input[name="user_name"]:not(:first)');

$('input[name="user_name"]:not(:eq(1))');

sagyo_の文字列を含むselectのname属性の個数
const sagyo_cnt = $('select[name*="sagyo_"]').length;

セレクタ挿入

後ろにtr挿入
$('#aaa_table').after('<tr><td style="width: 35%; text-align: left;" class="insert_deck">'+dragon_img+'</td></tr>');

前にtr挿入
$('#aaa_table').before('<tr><td style="width: 35%; text-align: left;" class="insert_deck">'+dragon_img+'</td></tr>');