jQuery - フォームフィルター

公開日：2018-12-10 更新日：2019-05-14
[jQuery]

1. 概要

フォームフィルターで要素を指定します。
基本的には inputタグが対象になります。
divタグに type="text" とつけても、$(":text") の対象にはなりません。
:enabled、:disabled などは、inputタグや option タグが対象となります。

$(":button")     //<input type="button"> <button />
$(":checkbox")   //<input type="checkbox">
$(":text")       //<input type="text">
$(":disabled")   //<input type="text" disabled="disabled" />
$(":enabled")    //<input type="text" />
$(":password")   //<input type="password" />
$(":radio")      //<input type="radio" />
$(":checked")    //<input type="checkbox" />
$(":reset")      //<input type="reset" />
$(":submit")     //<input type="submit" />
$(":selected")   //<option selected="selected">
$(":image")      //<input type="image" />
$(":file")       //<input type="file" />

2. サンプル

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery</title><style>body{color:#fff; background-color:#000;}</style></head>
<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

  <!-- 画面 -->
  <input type="button" value="ボタン1" /> <button>ボタン2</button><br />
  <br />
  <input type="checkbox" value="1" checked="checked">apple
  <input type="checkbox" value="1">orange<br />
  <br />
  <input type="text" value="banana" />
  <input type="text" value="strawberry" disabled="disabled" /><br />
  <br />
  <input type="password" value="11111" /><br />
  <br />
  <input type="radio" name="test" value="0">OFF
  <input type="radio" name="test" value="1" checked="checked">ON<br />
  <br />
  <input type="reset" value="クリア">
  <input type="submit" value="登録" />
  <br />
  <select>
    <option>1</option>
    <option selected="selected">2</option>
    <option>3</option>
  </select>
  <br />
  <textarea>Hello</textarea>

  <!-- Script -->
  <script>
    $(function(){
      $("input:button").css("color", "red");
      $("input:checkbox").css({
        "width":"28px",
        "height":"28px"});
      $("input:text").css("color", "blue");
      $("input:disabled").css("background-color", "pink");
      $("input:enabled").css("background-color", "skyblue");
      $("input:password").css("background-color", "lightgreen");
      $("input:radio").css({
        "width":"28px",
        "height":"28px"});
      $("input:checked").css({
        "width":"48px",
        "height":"48px"});
      
      $("input:reset").css("background-color", "yellow");
      $("input:submit").css("background-color", "green");
      $("select").css("background-color", "lightblue");
      $("select option:selected").css("background-color", "blue");
    });
  </script>

</body></html>

実行結果：画面



Tag

New Article