HTML要素の取得・書き換え

JavaScriptでテキストを取得

    let obj = document.getElementById('total-price');
    let price_data = obj.innerText;

ラジオボタンで選択された値を取得

<li>
  <input type="radio" name="type" value="apple">
</li>
<li>
  <input type="radio" name="type" value="lemon">
</li>

let elements = document.getElementsByName('type');
let len = elements.length;
let total_price = '';
for (let i = 0; i < len; i++){
   if (elements.item(i).checked){
      total_price = elements.item(i).value;
   }
}

JQueryで選択されたオプションの値を取得

color = $('input[name="color"]:checked').val(); //nameが「color」の選択されているラジオボタン

※クォーテーションとダブルクォーテーションに注意。

valueの値を取り出す場合と、表示されているテキストを取り出す場合の違い

<select name="color">
    <option value='gold'>金</option>
    <option value='red'>赤</option>
</select>

$('[name=color]').change(function() {
    // 選択されているvalue属性値を取り出す
    var val = $('[name="color"]').val();
    console.log(val); // 出力：gold
    // 選択されている表示文字列を取り出す
    var txt = $('[name="color"] option:selected').text();
    console.log(txt); // 出力：金
});

子要素の画像のsrcを取得する

<div class="user_image">
  <img src="https://global-business.link/user1.jpg">
</div>

var img_url = $(".user_image").children('img').attr('src')

要素のタイプの変更

    //#c_phoneのtypeをnumberからtextへ変更
    const elm = document.getElementById('c_phone');
    elm.type = "text";