JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/brandonaaron/jquery.batch/raw/master/jquery.batch.js"></script>
<form name="form1">
    
    文字方塊（單行）：<input type="text" name="firstname" value="Will Huang" /><br />

    文字方塊（多行）：<br /><textarea name="bio" rows="10" cols="50" /></textarea><br />

    <hr/>

    密碼欄位：<input type="password" name="pwd" /><br/>

    <hr/>
    
    下拉選單（單選）：<select name="cars1">
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="fiat" selected="selected">Fiat</option>
                        <option value="audi">Audi</option>
                    </select>
    <hr/>
    
    下拉選單（多選）：<select name="cars2" multiple="multiple" size="3">
                        <option value="volvo">Volvo</option>
                        <option value="saab">Saab</option>
                        <option value="fiat">Fiat</option>
                        <option value="audi">Audi</option>
                    </select>

    <hr/>
        
    單選選項（Radio）：<input type="radio" name="gender" value="male" /> Male<br />
                      <input type="radio" name="gender" value="female" /> Female<br />
    
    多選選項（CheckBox）：
        <input type="checkbox" name="vehicle" value="Bike" checked="checked" /> I have a bike<br />
        <input type="checkbox" name="vehicle" value="Car" checked="checked" /> I have a car <br />
        <input type="checkbox" name="vehicle" value="Moto" /> I have a Moto<br />
        <input type="checkbox" name="vehicle" value="Other" checked="checked" /> I have some vehicle.<br />
    
    
    <hr/>
    一般按鈕：<input id="btn" name="btn" type="button" value="Button 1" /><br/>
    重置按鈕：<input name="reset" type="reset" value="Reset" /><br/>
    送出按鈕：<input name="submit" type="submit" value="Submit" /><br/>
    
</form>

JavaScript

$(function()
  {
      $('#btn').click(function(){
          
          var txtFirstName = $('input[name="firstname"]').val();
          alert(txtFirstName);
      
          var ddlCar1 = $('select[name="cars1"]').val();
          alert(ddlCar1);

          var ddlGender = $('input:radio:checked[name="gender"]').val();
          alert(ddlGender);
     
          var cbxVehicle = $('input:checkbox:checked[name="vehicle"]').vals() || [];
          alert(cbxVehicle);

          var cbxVehicle = $('input:checkbox:checked[name="vehicle"]').map(function() { return $(this).val(); }).get();
          alert(cbxVehicle);
      
          var cbxVehicle = new Array();
          $('input:checkbox:checked[name="vehicle"]').each(function(i) { cbxVehicle[i] = this.value; });
          alert(cbxVehicle);
          
          var ddlCar2 = $('select[name="cars2"]').val() || [];
          alert(ddlCar2);
      });
      
          
      

  });