비전공자 개발일기

Serialize - input name에 해당 되는 값들 추출 본문

JQuery

Serialize - input name에 해당 되는 값들 추출

HiroDaegu 2021. 12. 18. 00:49
728x90
SMALL

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>serialize()</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css"
    />
  </head>
  <body>
    <form>
      <select name="single">
        <option>Single</option>
        <option>Single2</option>
      </select>
     
      <br>
      <select name="multiple" multiple="multiple">
        <option selected="selected">Multiple</option>
        <option>Multiple2</option>
        <option selected="selected">Multiple3</option>
      </select>
     
      <br>
      <input type="checkbox" name="check" value="check1" id="ch1">
      <label for="ch1">check1</label>
      <input type="checkbox" name="check" value="check2" checked="checked" id="ch2">
      <label for="ch2">check2</label>
     
      <br>
      <input type="radio" name="radio" value="radio1" checked="checked" id="r1">
      <label for="r1">radio1</label>
      <input type="radio" name="radio" value="radio2" id="r2">
      <label for="r2">radio2</label>
    </form>
     
    <p><tt id="results"></tt></p>

    <script>
      function showValues() {
        var str = $( "form" ).serialize();
        $( "#results" ).text( str );
      }
      $( "input[type='checkbox'], input[type='radio']" ).on( "click", showValues );
      $( "select" ).on( "change", showValues );
      showValues();
    </script>
  </body>
</html>
728x90
LIST

'JQuery' 카테고리의 다른 글

JQuery - sortable  (0) 2021.12.27
JQuery 17 - datepicker  (0) 2021.12.24
JQuery16 - select option detail value 입력  (0) 2021.12.16
JQuery15  (0) 2021.12.15
JQuery14  (0) 2021.12.14
'JQuery' Related Articles more