【JavaScript、jQuery】よく使う

値を設定/削除

<input type="text" id="inputText" /><br>
<input type="button" id="insertButton" value="入力" />
<input type="button" id="clearButton" value="クリア" />

<script>
  // 入力ボタンをクリック
  $('#insertButton').on('click', function() {
    // 値を入力
    $('#inputText').val('サンプルです');
  });

  // クリアボタンをクリック
  $('#clearButton').on('click', function() {
      // 値を削除
      $('#inputText').val('');
  });
</script>

ラジオボタンがONの場合のみ項目を表示

<input type="radio" id="isRegistOn" value="true" name="toroku" />登録あり
<input type="radio" id="isRegistOff" value="false" name="toroku" checked/>登録なし<br>
<input type="text" id="userName" value=""/>

<script>
  // 初期表示処理
  if ($('#isRegistOff').is(':checked')){
    // 登録なしにチェックがあれば、対象の項目を非表示
    $('#userName').hide();
  } else {
      // それ以外の場合、対象の項目を表示
    $('#userName').show();
  }

  // 登録ありをクリック
  $('#isRegistOn').on('click', function() {
      // 対象の項目を表示
      $('#userName').show();
  });

  // 登録なしをクリック
  $('#isRegistOff').on('click', function() {
      // 対象の項目を非表示
      $('#userName').hide();
  });
</script>

ラジオボタンの選択/解除/値の取得

<input type="radio" id="rd0" name="radio_test" value="０番" />ラジオテスト0
<input type="radio" id="rd1" name="radio_test" value="１番" />ラジオテスト1
<input type="radio" id="rd2" name="radio_test" value="２番" />ラジオテスト2<br>
<input type="button" id="select1Button" value="１番を選択" />
<input type="button" id="clear1Button" value="1番の選択解除" />
<input type="button" id="clearAllButton" value="全選択解除" />
<input type="button" id="getButton" value="値を取得" />

<script>
  // １番を選択をクリック
  $('#select1Button').on('click', function() {
    // 選択　（id指定）
    $('#rd1').prop('checked', true);
  });

  // １番の選択解除ボタンをクリック
  $('#clear1Button').on('click', function() {
    // 選択解除　（id指定）
    $('#rd1').prop('checked', false);
  });

  // 全選択解除ボタンをクリック
  $('#clearAllButton').on('click', function() {
    // 選択解除　（name指定）
    $("input[name='radio_test']").prop('checked', false);
  });

  // 値を取得
  $("#getButton").on('click', function() {
      var radioVal = $("input[name='radio_test']:checked").val();
      alert(radioVal);
  });
</script>

ボタンの二重クリック防止

ボタンはinput type="button"ではなく、buttonにしておくこと
⇒連打しても正しく動作する

<button type="submit" formaction="offer_confirm">確認へ進む</button>

<script>
  // 二重クリック防止
  $('button, input[type="button"]').on('click', function() {
    $(this).prop("disabled", true);
  });
</script>