フォーム入力タイプ

例

選択ボックス

HTML

<select class="form-control" id="beverage">
  <option value="coffee">Coffee</option>
  <option value="tea">Tea</option>
  <option value="kombucha">Kombucha</option>
  <option value="water">Water</option>
</select>

ジャバスクリプト

const beverage = $("#beverage").val();

ラジオボタン

HTML

<div class="radio">
  <label>
    <input type="radio" name="flavor" value="chocolate" checked>
    Chocolate
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="flavor" value="vanilla">
    Vanilla
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="flavor" value="cookiesandcream">
    Cookies & Cream
  </label>
</div>

ジャバスクリプト

const flavor = $("input:radio[name=flavor]:checked").val();

日付ピッカー

HTML

<div class="form-group">
  <label for="born">Date of birth:</label>
  <input id="born" class="form-control" type="date">
</div>

const dob = $("#born").val();

カラーピッカー

<div class="form-group">
  <label for="color">What is your favorite color?</label>
  <input id="color" class="form-control" type="color">
</div>

ジャバスクリプト

const favoriteColor = $("#color").val();

ヒント

分岐

用語

例

if (age > 21) {
  $('#drinks').show();
}

if (age > 21) {
  $('#drinks').show();
} else {
  $('#under-21').show();
}

if (age > 21) {
  $('#drinks').show();
} else if (age === 21) {
  $('#drinks').show();
} else {
  $('#under-21').show();
}

const over21 = true;
if (over21) {
  $('#drinks').show();
}

3 > 2;
// returns true

用語