jQueryでテキストボックスの値を空にする方法まとめ

jquery value 空にする

この記事では、jQueryを使用してテキストボックスの値を空にする方法について解説します。テキストボックスの値をクリアする様々なシチュエーションに対応できるよう、複数の方法を紹介します。

方法1: val()メソッドで空文字列をセット

val('') を使用して、テキストボックスの値に空文字列をセットします。この方法が最も一般的でシンプルな方法です。


<input type="text" id="textbox" value="初期値">
<button id="clearButton">クリア</button>

<script>
  $(document).ready(function(){
    $("#clearButton").click(function(){
      $("#textbox").val(''); 
    });
  });
</script>

方法2: val(null) を使用する

val(null) を使用すると、テキストボックスの値をnullに設定できます。空文字列ではなく、明示的にnull値を設定したい場合に有効です。


$("#textbox").val(null);

方法3: text()メソッドで空文字列をセット

text('') を使用して、テキストボックス内のテキストコンテンツを空文字列に置き換えます。 val() メソッドと同様に動作しますが、テキストエリア(<textarea>)要素にも使用できます。


$("#textbox").text('');

特定の条件下で値を空にする

特定のボタンがクリックされたときなど、特定の条件下でのみテキストボックスの値を空にしたい場合は、jQueryのイベントハンドラを使用します。


<input type="text" id="textbox">
<button id="clearButton">クリア</button>

<script>
  $(document).ready(function(){
    $("#clearButton").click(function() {
      $("#textbox").val(""); 
    });
  });
</script>

複数要素の値を空にする

クラス名や属性などで複数のテキストボックスを選択し、each() メソッドを使用してそれぞれの値を空にすることができます。


<input type="text" class="textbox">
<input type="text" class="textbox">
<input type="text" class="textbox">

<script>
  $(document).ready(function(){
    $(".textbox").each(function() {
      $(this).val(""); 
    });
  });
</script>

まとめ

jQueryには、テキストボックスの値を空にするための様々な方法があります。この記事で紹介した方法の中から、状況に応じて最適な方法を選択してください。

参考文献