jQuery serializeメソッドでフォーム(form)のチェックボックス、ラジオボタンの値を取得する

2022年11月14日

環境
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」が表示されます。

jQuery

Posted by arkgame

関連記事: