質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1679閲覧

jQueryでチェックボックスのテキストを変更したい

Peeetaro

総合スコア17

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/05/10 08:10

前提・実現したいこと

チェックボックスにチェックが付いているときは「検索条件を閉じる」の文言を表示させ
チェックが付いていないときは「検索条件を追加」という文言にしたい。

発生している問題・エラーメッセージ

現在、クリックすると文言はうまく変更されるが下記HTMLのコードのようにinputにcheckedを入れた状態で ブラウザで確認するとテキストが「検索条件を追加」になってしまっている状態です。 (このときはチェックが付いているからテキストは「検索条件を閉じる」になっていてほしい)

該当のソースコード

HTML---------------------------------------------- <input type="checkbox" id="addSearch" checked="checked"/> <label class="addCondition-switch" for="addSearch"><span>検索条件を追加</span></label> jquery---------------------------------------------- $(window).on('load', function() { $('#addSearch').change(function() { if ( $(this).prop('checked') == true){ $('.addCondition-switch').html('検索条件を閉じる'); } else { $('.addCondition-switch').html('検索条件を追加'); } }); });

試したこと

HTMLを読み込んだ後処理を実行したらいけるかと思ったんですが
解決しないで困っています。
よろしくお願い致します。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

HTMLを読み込んだ後処理を実行したらいけるかと思ったんですが

イベント発火の条件が「change」なのでその「change」が起きるまで待機状態となります。
いっそのこと関数作ってそこで初期値設定してはどうでしょうか。

js

1$(function() { 2 init(); 3 $('#addSearch').on("change",function() { 4 init(); 5 }); 6 function init(){ 7 if ( $("#addSearch").prop('checked') == true){ 8 $('.addCondition-switch').html('検索条件を閉じる'); 9 } else { 10 $('.addCondition-switch').html('検索条件を追加'); 11 } 12 } 13});

投稿2019/05/10 08:24

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Peeetaro

2019/05/10 08:37

回答ありがとうございます。 適用させてみたところ意図している表示にはなったのですが 一瞬「検索条件を追加」の文字が表示された後、「検索条件を閉じる」に変わっています。 この一瞬表示されるのは仕方ないんでしょうか? 続けての質問になり申し訳ありません。
m.ts10806

2019/05/10 08:39

「(対象の)HTMLを読み込んだ後」でないと対象のDOMはいじれませんので、そうなります。 どうしても防ぎたければ初期で(CSSで)display:none;を適用しておき、文言変更後にshow()するとかですね。
Peeetaro

2019/05/10 08:51

なるほど。 とてもわかりやすいご説明ありがとうござます。
m.ts10806

2019/05/10 08:52

ヒントになったようで何よりです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問