jQuery serializeメソッドでフォーム(form)のチェックボックス、ラジオボタンの値を取得する
環境
jquery 3.6.0
Google Chrome 107.0.5304.107
構文
const 変数名 = $(“#フォームID名").serialize()
$(“#要素ID名").text(変数名);
チェックボックス
<input type="checkbox" id="city" name="name名" value="値" checked />:
ラジオボタン
<input type="radio" name="ラジオボタン名" value="値" checked />
セレクトボックス
<select id="セレクトボックスid名" name="セレクトボックス名">
使用例
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btnchg").click(function () { const str = $("#frmcity").serialize(); $("#show").text(str); }); }); </script> </head> <body> <p>値:<span id="show"></span></p> <form id="frmcity"> <input type="checkbox" id="city" name="city1" value="yokohama" checked />:横浜---チェックボックス <p> <input type="radio" name="rdcity" value="red" checked /> 東京 <input type="radio" name="rdcity" value="blue" /> 大阪 ---ラジオボタン </p> <p> <select id="selectcity" name="selectcity"> <option value="yamada">山田</option> <option value="oosahashi">大橋</option> <option value="koyama">小山</option> </select> ---セレクトボックス </p> <p> <input type="button" id="btnchg" value="検証" /></p> </form> </body> </html>
結果
「検証」ボタンを押すと、「値:city1=yokohama&rdcity=red&selectcity=yamada」が表示されます。