ご存知の方、ご教授くださいm(__)m
現在、画面上で入力された項目を消去するためにクリアボタンを設置しています。
フォーム中の、
・通常のテキストボックスの内容:消去
・disabledのテキストボックスの内容:消去せずそのまま
・チェックボックスはchecked=falseにする
としたいと考えているのですが、javascriptでうまく動かせていません。今書いているコードは下記のようなものです。
$(document).ready(function () {
$('.buttons :button[name=clear]').click(function() {
$('.inputs :input:visible').val('');
return false;
});
これを改良してうまく動くようにすることは可能でしょうか。
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
こんにちは。
うまくいかないとはどのようになっていますか?
先ほどのサンプルの動作を確認できるURLです。
http://hppg.moe.hm/okwave/qa/q7954963/
Firefox,Chrome,IE8にて動作確認しています。
というか、基本的にjQuery使っていれば大体のブラウザで動きます。
(特殊なことしなければ)
この回答への補足
素早いレス、ありがとうございます。
いただいたURLのコードだと確かに問題なくいけますね。
No.1の分だと、自環境ではどの項目も消えないという状況になってしまっていました。
(HTMLの書き方が悪かったのだと思います。。)
現状、実際に入れ込む環境では
・チェックボックスのチェックは問題なく消える
・disabledなテキストボックスの内容は消えてしまう
という状況です。
・・・と思っていましたが、
$('.inputs :input:visible').val('');
という余計なスクリプトが入っていたため、disabled分まで消してしまっていたようです。
ということで、無事解決できました!
ありがとうございました!!m(__)m
No.1
- 回答日時:
こんにちは。
$('button').click ( function() {
// input type="text"だけどdisabled="disabled"のものを除いて''をセット(空白にする)
$('input[type="text"]').not('[disabled="disabled"]').val ( '' );
// input type="checkbox"のchecked属性を削除(チェックを外す)
$('input[type="checkbox"]').removeAttr ( 'checked' );
});
HTML側がどうなってるかわからなかったので勝手に作ってみたのでセレクタは調節してください。
==== HTML
<input type="text" name="n1">
<input type="text" name="n2">
<input type="text" name="n1" value="3" disabled>
<hr>
<input type="checkbox" value="2">
<input type="checkbox" value="2">
<hr>
<button type="button" name="clear">クリア</button>
この回答への補足
こんにちは。
早速の回答、ありがとうございます。
まずはいただいたサンプルを動作させてみたのですが、うまく動きませんでした。
いただいたサンプルでの想定されているブラウザを教えていただけますか?
こちらはIE8、IE9、あとできればChrome、です。
よろしくお願いいたします。m(__)m
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript 追加ボタンを押した際に ok ボタンを押した場合のみ入力値が追記されるようにしたいです 6 2022/05/29 09:57
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
- JavaScript javascriptで入力フォームが空欄の時にアラートによるエラーを出すコードを書いています。 2 2023/06/13 17:58
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
チェックボックスのON/OFFでVal...
-
チェックボックスの無効化、有効化
-
checkboxをクリックしてリロー...
-
フォームのチェックボックスの...
-
【jsp/Java】チェックボックス...
-
チェックボックスの未入力チェック
-
チェックボックスが複数ある場...
-
チェックボックス
-
複数のチェックボックス項目が...
-
背景色を変えて未入力チェック...
-
チェックボックスのON/OFFに応...
-
チェックボックスとラジオボタ...
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
-
テキストボックス入力を半角英...
-
【jQuery】input nameの文字列...
-
二つの入力欄に、同時に同じ文...
-
onchangeイベントを強制的に発...
-
<input>の選択肢をプルダウンメ...
-
ボタンかリンクをクリックする...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【jsp/Java】チェックボックス...
-
チェックボックスのON/OFFでVal...
-
checkboxをクリックしてリロー...
-
チェックボックスに全てチェッ...
-
JSP内で可変するチェックボック...
-
確認ページからフォームページ...
-
チェックボックスのON/OFFに応...
-
Objective-Cでチェックボックス...
-
EclipseでSpringを使用し、テー...
-
チェックボックスの設定
-
スクリプト内でチェックボック...
-
チェックボックスで合計値を計...
-
背景色を変えて未入力チェック...
-
チェックボックスのグループ化...
-
オフになっているチェックボッ...
-
checkboxの選択数制限と排他処...
-
複数のチェックボックス項目が...
-
Nameは配列で、チェックされた...
-
jquery 診断コンテンツにチェッ...
-
チェックボックスでor検索
おすすめ情報