同じ<ul>タグの複数の<li>タグで、radioボタンのvalue属性が取得できる<li>タグと取得できない<li>タグがあります

前提・実現したいこと

質問内容
radioボタンのvalue属性が取得できません。

htmlとjsファイルでラジオボタンがcheckedされているタグのvalue属性を取得しようとしています。
以下実際のソースコードです。

htmlファイル

<ul> <li><input class="outBtn" type="radio" name="age" value="20歳未満の方" checked>20歳未満の方</li> <li><input class="inBtn" id="test" type="radio" name="age" value="20歳以上65歳未満の方">20歳以上65歳未満の方 </li> <li><input class="outBtn" type="radio" name="age" value="65歳以上の方">65歳以上の方</li> </ul>

jsファイル

$('.hook-btn').click(function () {
if ($(this).val() === ('内容を確定する')) {
//radioボタンの選択した年齢を取得する
var ageRange = $('input:radio[name="age"]:checked').val();
console.log(ageRange);
$('#setText01').text(ageRange);
} else {

    };
});

発生している問題・エラーメッセージ

<li><input class="inBtn" id="test" type="radio" name="age" value="20歳以上65歳未満の方">20歳以上65歳未満の方 </li> だけ、value属性を取得できません。 console.log(ageRange);の結果がundefinedとなります。

試したこと

class名を揃える。
→value属性が取得できないinputタグだけ【class="inBtn"】なので、【class="outBtn"】に変更する。

補足情報

radioボタンで年齢層を選択し、確定するボタンを押して、選択した内容が反映されるホームページを作成しています。

gpsoft

2021/01/23 12:16

試してみましたが、再現しませんでしたよ(3つとも問題なし)。できれば、html全体を載せてもらった方が良いと思います。 jQueryのバージョンとかが関係してるかもしれないので。あと、value属性値を、日本語ではなく、1, 2, 3などにしても同じ現象になりますか?

sakasaka

2021/01/24 00:47

返信ありがとうございます。以下、htmlファイルの全文です。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>アンケートフォーム</title> <link rel="stylesheet" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <header> <div class="header-container"> <h1>〇アンケート回答フォーム</h1> </div> </header>  <form id="my-form"> <div class="edit-before"> <table border="1">  <tr align="center"> <td colspan="5">年齢</td> <td rowspan="2" colspan="2"><input class="hook-btn" type="button" value="内容を確定する"></td> </tr> <tr> <td colspan="5"> <ul> <li><input class="outBtn" type="radio" name="age" value="1" checked>20歳未満の方</li> <li><input class="inBtn" id="test" type="radio" name="age" value="2">20歳以上65歳未満の方 </li> <li><input class="outBtn" type="radio" name="age" value="3">65歳以上の方</li> </ul> </td> </tr>   <tr class="select-inBtn"> <td rowspan="2">名前</td> <td colspan="4">漢字</td> <td><span>姓　</span><input type="text" id="inputText01" value=""></td> <td><span>名　</span><input type="text" id="inputText02" value=""></td> </tr> <tr class="select-inBtn"> <td colspan="4">カナ</td> <td><span>セイ</span><input type="text" id="inputText03" value=""></td> <td><span>メイ</span><input type="text" id="inputText04" value=""></td> </tr> <tr class="select-inBtn"> <td>年齢</td> <td colspan="4"><input type="text" id="inputText05" value="">歳</td> <td>職業</td> <td> <select id="select-occupation" name="occupation" size="0"> <option value="次の中から１つ選んでください">次の中から１つ選んでください</option> <option value="会社員">会社員</option> <option value="契約社員">契約社員</option> <option value="学生">学生</option> <option value="その他">その他</option> </select> </td> </tr>  </table> </div> </form>   <div class="edit-after"> <table border="1">  <tr class="edit-after-outBtn" align="center"> <td align="left" colspan="5">年齢:<span id="outputText01"></span></td> <td id="hook-td" rowspan="2" colspan="2"><input class="hook-btn" type="button" value="内容を修正する"></td> </tr>   <tr class="edit-after-inBtn" align="center"> <td align="left" colspan="5">名前（漢字）:<span id="outputText02"></span></td> </tr> <tr class="edit-after-inBtn" align="center"> <td align="left" colspan="5">名前（カナ）:<span id="outputText03"></span></td> </tr> <tr class="edit-after-inBtn" align="center"> <td align="left" colspan="5">年齢:<span id="outputText04"></span></td> </tr> <tr class="edit-after-inBtn" align="center"> <td align="left" colspan="5">職業:<span id="outputText05"></span></td> </tr>  </table> </div>  <script type="text/javascript" src="demo.js"></script> </body> </html> 以下jsファイルの全文です $(function () { //20歳以上65歳未満の方を選択した際に、入力欄を拡大する $('.inBtn').click(function () { $('.select-inBtn').show(); }); //20歳未満の方、もしくは65歳以上の方を選択した際に、入力欄を縮小する $('.outBtn').click(function () { $('.select-inBtn').hide(); }); // 内容を確定するもしくは修正するボタン(hook-btn)を押下した際に // edit-before、もしくはedit-afterを表示する $('.hook-btn').click(function () { if ($(this).val() === ('内容を確定する')) { $('.edit-before').hide(); $('.edit-after').show(); var element = document.getElementById('test'); if (element.checked) { $('.edit-after-outBtn').show(); $('.edit-after-inBtn').show(); $('#hook-td').attr('rowspan', '5'); element.checked = false; } else { $('#hook-td').attr('rowspan', '2'); $('.edit-after-inBtn').hide(); $('.edit-after-outBtn').show(); } } else { $('.edit-after').hide(); $('.edit-before').show(); }; }); //入力内容をsetTextに反映させるもしくは、クリアにするメソッド $('.hook-btn').click(function () { if ($(this).val() === ('内容を確定する')) { //radioボタンの選択した年齢を取得する var ageRange = $('input[name="age"]:checked').val(); console.log(ageRange); // if (ageRange === undefined) { // ageRange = '20歳以上65歳未満の方'; // }; $('#outputText01').text(ageRange); //漢字で入力した名前を反映させる var kanjiName = $('#inputText01').val() + $('#inputText02').val() + "　様"; $('#outputText02').text(kanjiName); //カナで入力した名前を反映させる var kanaName = $('#inputText03').val() + $('#inputText04').val() + "　様"; $('#outputText03').text(kanaName); //年齢を反映させる var age = $('#inputText05').val() + " 歳"; $('#outputText04').text(age); //職業を反映させる var job = $('#select-occupation').val(); $('#outputText05').text(job); } else { //forEach文を使い、入力内容をクリアにする。 var inputTexts = ['inputText01', 'inputText02', 'inputText03', 'inputText04', 'inputText05', 'select-occupation']; inputTexts.forEach((element) => { var inputForm = document.getElementById(element); inputForm.value = ""; }); }; }); }); あと、value属性値を、日本語ではなく、1, 2, 3などにしても同じ現象になりますか? ＞同じく、var ageRange = $('input[name="age"]:checked').val(); console.log(ageRange); の結果がundefinedになりました、、、

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1var element = document.getElementById('test');
2if (element.checked) {
3	$('.edit-after-outBtn').show();
4	$('.edit-after-inBtn').show();
5	$('#hook-td').attr('rowspan', '5');
6	element.checked = false;
7	...