jQueryフォームセレクタの例

投稿日: 2019-11-05 2019-11-05
タグ: jquery, jquery selector

jQueryには、フォーム要素にもっと簡単かつ効率的にアクセスするための多くのフォームセレクタが付属しています。単純なjQueryフォームセレクタのリファレンスです。

1.テキストボックス – $（ ‘入力:テキスト’）

テキストボックスを選択するには

$('input:text');

テキストボックスの値を取得するには

$('input:text').val();

テキストボックスの値を設定するには

$('input:text').val("New Text");

2.パスワード – $（ ‘入力:パスワード’）

パスワードを選択するには

$('input:password');

パスワード値を取得するには

$('input:password').val();

パスワードの値を設定するには

$('input:text').val("New Text");

3.テキストエリア – $（ ‘textarea’）

テキストエリアを選択するには

$('textarea');

テキストエリアの値を取得するには

$('textarea').val();

テキストエリアの値を設定するには

$('textarea').val("New Text in Textarea");

4.ラジオボタン – $（ ‘入力:ラジオ’）

ラジオボタンを選択するには

$('input:radio');

選択したラジオボタンオプションを取得するには

$('input:radio[name=radiobutton-name]:checked').val();

最初のオプションボタンを選択するには

$('input:radio[name=radiobutton-name]:nth(0)').attr('checked',true);
or
$('input:radio[name=radiobutton-name]')[0].checked = true;

リンク://jquery/how-to-select-a-jquery付きラジオボタン/[詳細…]

5.チェックボックス – $（ ‘入力:チェックボックス’）

チェックボックスを選択するには

$('input:checkbox');

チェックボックスがオンになっているかどうかを確認するには

$('input:checkbox[name=checkboxname]').is(':checked');

チェックボックスをオンにするには

$('input:checkbox[name=checkboxname]').attr('checked',true);

チェックボックスをオフにするには

$('input:checkbox[name=checkboxname]').attr('checked',false);

リンク://jquery/how-to-select-a-jquery付きラジオボタン/[詳細…]

6.アップロードファイル – $（ ‘入力:ファイル’）

ファイルを選択するには

$('input:file');

ファイルの値を取得するには

$('input:file').val();

7.隠し値 – $（ ‘input:hidden’）

隠れた値を選択するには

$('input:hidden');

隠された価値を得るには

$('input:hidden').val();

隠し値を設定するには

$('input:hidden').val("New Text");

8.選択（ドロップダウンボックス） – $（ ‘選択’）

ドロップダウンボックスを選択するには

$('select')
or
$('#dropdown-id')

選択したドロップダウンボックスの値を取得するには

$('#dropdown-id').val();

ドロップダウンボックスの値を “China”に設定するには、

$("#dropdown-id").val("China");

詳細…

9. Submitボタン – $（ ‘input:submit’）

送信ボタンを選択するには

$('input:submit');

10.リセットボタン – $（ ‘入力:リセット’）

リセットボタンを選択するには

$('input:reset');

jQueryフォームセレクタ

<html>
<head>
<title>jQuery form selector example</title>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
    div{
        padding:16px;
    }
</style>
</head>

<body>

<h1>jQuery form selector example</h1>

<h2>Message = <label id="msg"></label></h2>

<form name="testing" action="#">
  <div>
    TextBox : <input type="textbox" value="This is message from textbox"/>
  </div>
  <div>
    Password : <input type="password" value="This is message from password"/>
  </div>
  <div>
    TextArea : <textarea>This is message from textarea</textarea>
  </div>
  <div>
    Radio : <input name="sex" type="radio" value="Male" checked>Male</input>
            <input name="sex" type="radio" value="Female">Female</input>
  </div>
  <div>
    CheckBox : <input type="checkbox" name="checkme">Check Me</input>
  </div>
  <div>
    File : <input type="file"></input>
  </div>
  <div>
    Hidden : <input type="hidden" value="This is message from hidden"/>
  </div>
  <div>
    Country : <select id="country">
            <option value="China">China</option>
            <option value="United State">United State</option>
             </select>
  </div>
  <div>
    <input type="submit"></input> <input type="reset"></input>
  </div>
</form>

<button id="text">input:text</button>
<button id="password">input:password</button>
<button id="textarea">textarea</button>
<button id="radio">input:radio</button>
<button id="checkbox">input:checkbox</button>
<button id="file">input:file</button>
<button id="hidden">input:hidden</button>
<button id="select">select</button>
<button id="submit">input:submit</button>
<button id="reset">input:reset</button>

<script type="text/javascript">
    $("#text, #password, #hidden,
          #textarea, #file, #submit, #reset").click(function () {
      var str = $(this).text();
      $('input, textarea, select').css("background", "#ffffff");
      $(str).css("background", "#ff0000");
      $('#msg').html($(str).val())
    });

    $("#radio").click(function () {
      $('input, textarea, select').css("background", "#ffffff");
      $('#msg').html($('input:radio[name=sex]:checked').val());
    });

    $("#checkbox").click(function () {
      var str = $(this).text();
      $('input, textarea, select').css("background", "#ffffff");

      if($('input:checkbox[name=checkme]').is(':checked')){
        $('#msg').html("Checkbox is checked");
      }else{
        $('#msg').html("Checkbox is uncheck");
      }
    });

    $("#select").click(function () {
      $('input, textarea, select').css("background", "#ffffff");
      $('#msg').html($('#country').val());
    });

</script>

</body>
</html>

リンク://wp-content/uploads/jQuery/jQuery-form-selector.html[デモを試してください]

jquery

jquery selector

getdocs

13036