jQueryのHTMLフォーム操作

以下のページでjQueryやDOMについて学んでいます。 www.mojage.club

本記事は、jQueryのHTMLフォーム操作について纏めています。

Sponsored Link

HTMLフォーム操作

フォーム要素の有効と無効

.attr()を使用するとフォーム要素の有効/無効が設定できます。
attr([key], [value])

<input name="button" type="button" id="button" />

  $('#button').attr('disabled', 'disabled');

  // or

  // $('#button').removeAttr('disabled');

  // or

  // $('#button').attr('disabled', '');

有効/無効の確認

<input name="button" type="button" id="button1" />
<input name="button" type="button" id="button2" disabled="disabled" />

alert($('#button1').is(':enabled')); // true

alert($('#button1:enabled').length); // 1

alert($('#button2').is(':disabled')); // true

alert($('#button2:disabled').length); // 1

チェックボックス/ラジオボタン

<input name="" value="" type="checkbox" />
<input name="" value="" type="radio" />

  // 全てのラジオボタンとチェックボックスのチェックを入れる
  $('input:checkbox,input:radio').attr('checked', 'checked');


  // 外す
  //$('input').removeAttr('checked');

  // or

  //$('input').attr('checked', '');

.val()を使用する場合は以下

<input type="radio" value="radio1">
<input type="radio" value="radio2">
<input type="checkbox" value="checkbox1">
<input type="checkbox" value="checkbox2">

  $('input:radio,input:checkbox').val(['radio1', 'radio2', 'checkbox1', 'checkbox2']);

  // 外す
  // $('input:radio,input:checkbox').removeAttr('checked');

  // or

  // $('input:radio,input:checkbox').attr('checked', '');

input要素の値を設定/取得

<input type="button" />
<input type="checkbox" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="sub

[http://www.mojage.club/entry/2017/06/18/125158:embed:cite]



[http://www.mojage.club/entry/2017/06/18/125158:embed:cite]

mit" />
<input type="text" />

  //設定
  $('input:button').val('I am a button')
  $('input:checkbox').val('I am a checkbox')
  $('input:hidden').val('I am a hidden input')
  $('input:image').val('I am a image')
  $('input:password').val('I am a password')
  $('input:radio').val('I am a radio')
  $('input:reset').val('I am a reset')
  $('input:submit').val('I am a submit')
  $('input:text').val('I am a text')

  // 取得
  alert($('input:button').val());
  alert($('input:checkbox').val());
  alert($('input:hidden').val());
  alert($('input:image').val());
  alert($('input:password').val());
  alert($('input:radio').val());
  alert($('input:reset').val());
  alert($('input:submit').val());
  alert($('input:text').val());

フォーム要素のセレクタ

  • :text
  • :password
  • :radio
  • :checkbox
  • :submit
  • :image
  • :reset
  • :file
  • :button

Reference from : jQuery Enlightenment