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="checkbox" id="city" name="name名" value="値" checked />：

ラジオボタン

<input type="radio" name="ラジオボタン名" value="値" checked />

セレクトボックス

<select id="セレクトボックスid名" name="セレクトボックス名">

使用例

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

$("#btnchg").click(function () {

const str = $("#frmcity").serialize();

$("#show").text(str);

});

</script>

</head>

<body>

<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>

</select>

---セレクトボックス

</p>

<p>

</form>

</body>

</html>

<!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>

<!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

関連投稿: