チェックボックスの値に基づいてテキストを変更する

Blnukem

チェックボックスの現在の値がチェックされているか、チェックされているか、チェックされていないかに基づいてテキスト値を変更しようとしています。ユーザーに表示可能なテキストの値を示す必要があります。これが私が持っているものです。私は近くにいると思いますが、うまくいきません。

<html>
<body>   

 <style type="text/css">
    .red{ display: none;}
    .blue{ display: none;}
</style>

<script>
// Toggle Text
$(document).ready(function(){
        $('input[type="checkbox"]').click(function(){

            if($(this).attr("value")=="red"){
                $(".Color").toggle();
            }else($(this).attr("value")=="blue"){
                $(".Color").toggle();
            }

        });
    });

</script>

     <div>
        <label><input type="checkbox" name="colorCheckbox" value="Color"></label>
        </div>

    <div class="red">You have selected <strong>red checkbox</strong></div>
    <div class="blue">You have selected <strong>red checkbox</strong> </div>

</body>
</html>
キエランブリストウ

正確に何をしようとしているのかわかりませんが、サンプルコード/ htmlを少し変更しました。特定のチェックボックスがオンになっているタイミングに応じて、各divの表示/非表示をリンクする必要があると想定しました。

$(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).is(":checked"))
            {
                $("." + $(this).val()).show();
            }
            else{
                $("." + $(this).val()).hide();
            }
        });
    });

以下のフィドル:http//jsfiddle.net/whhvks0u/4/

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ラジオボタンがチェックされているときにテキストボックスの値を取得し、テキストボックスの値に基づいてラジオボタンの値を変更します

分類Dev

チェックボックスの選択に基づいてボタンのテキストを変更する

分類Dev

チェックボックスの値に基づいて要素の可視性を変更するには?

分類Dev

VBA他のテキストボックスが空かどうかに基づいてテキストボックスの値を変更する

分類Dev

Angular9-認証に基づいてチェックボックスの値を変更する

分類Dev

tkinterでOptionMenuの回答に基づいてチェックボックスリストを変更する

分類Dev

特定の値に基づいてチェックボックスのステータスを変更する方法、およびチェックボックスのリストをサーバーに投稿する方法

分類Dev

チェックボックスチェックに基づいてテキストボックス値を削除する

分類Dev

innerHTMLを使用してチェックボックスに基づいてdiv値を変更する

分類Dev

チェックボックスの変更時にテキストボックスの値を追加/削除する

分類Dev

チェックボックスがオンになっているかどうかに基づいて、入力テキストフィールドの値を変更するにはどうすればよいですか?

分類Dev

チェックボックスの状態に基づいて親クラスを変更する

分類Dev

$ _GETパラメータに基づいてチェックボックスのチェックステータスを変更する

分類Dev

テキストエリアの値に基づいてjqueryのチェックボックスをオンまたはオフにする方法

分類Dev

テキストに基づいて、前のチェックボックスをオンにします

分類Dev

MS Access 2013:フォームのチェックボックスに基づいてレポートのラベルキャプションを変更する

分類Dev

テキストに基づいてチェックボックスを選択する方法

分類Dev

データベースからのドロップダウン選択に基づいてテキスト ボックスの値を変更する方法

分類Dev

テキストに基づいてリッチテキストボックスのサイズを動的に変更しますか?

分類Dev

PHPのドロップダウンメニューの変更に基づいてテキストボックスの値を更新する

分類Dev

選択オプションの値に基づいてテキストボックスの値を動的に変更する

分類Dev

チェックボックスのセットに基づいて値の配列を取得する

分類Dev

値に基づいてテキストボックスを非表示にする

分類Dev

チェックボックスからテキストボックスの値を変更する方法

分類Dev

Rails 4:RailsでJQueryを使用してチェックボックス値に基づいてテキストフィールドを無効にする方法

分類Dev

チェックボックスに基づいて、ブートストラップボタンを無効からアクティブに変更します

分類Dev

チェックボックスのステータスに基づいてラベルの色を変更する

分類Dev

内部のテキストの長さに基づいてボックスの高さを変更します

分類Dev

画面サイズに基づいてブートストラップのチェックボックスラベルを変更する

Related 関連記事

  1. 1

    ラジオボタンがチェックされているときにテキストボックスの値を取得し、テキストボックスの値に基づいてラジオボタンの値を変更します

  2. 2

    チェックボックスの選択に基づいてボタンのテキストを変更する

  3. 3

    チェックボックスの値に基づいて要素の可視性を変更するには?

  4. 4

    VBA他のテキストボックスが空かどうかに基づいてテキストボックスの値を変更する

  5. 5

    Angular9-認証に基づいてチェックボックスの値を変更する

  6. 6

    tkinterでOptionMenuの回答に基づいてチェックボックスリストを変更する

  7. 7

    特定の値に基づいてチェックボックスのステータスを変更する方法、およびチェックボックスのリストをサーバーに投稿する方法

  8. 8

    チェックボックスチェックに基づいてテキストボックス値を削除する

  9. 9

    innerHTMLを使用してチェックボックスに基づいてdiv値を変更する

  10. 10

    チェックボックスの変更時にテキストボックスの値を追加/削除する

  11. 11

    チェックボックスがオンになっているかどうかに基づいて、入力テキストフィールドの値を変更するにはどうすればよいですか?

  12. 12

    チェックボックスの状態に基づいて親クラスを変更する

  13. 13

    $ _GETパラメータに基づいてチェックボックスのチェックステータスを変更する

  14. 14

    テキストエリアの値に基づいてjqueryのチェックボックスをオンまたはオフにする方法

  15. 15

    テキストに基づいて、前のチェックボックスをオンにします

  16. 16

    MS Access 2013:フォームのチェックボックスに基づいてレポートのラベルキャプションを変更する

  17. 17

    テキストに基づいてチェックボックスを選択する方法

  18. 18

    データベースからのドロップダウン選択に基づいてテキスト ボックスの値を変更する方法

  19. 19

    テキストに基づいてリッチテキストボックスのサイズを動的に変更しますか?

  20. 20

    PHPのドロップダウンメニューの変更に基づいてテキストボックスの値を更新する

  21. 21

    選択オプションの値に基づいてテキストボックスの値を動的に変更する

  22. 22

    チェックボックスのセットに基づいて値の配列を取得する

  23. 23

    値に基づいてテキストボックスを非表示にする

  24. 24

    チェックボックスからテキストボックスの値を変更する方法

  25. 25

    Rails 4:RailsでJQueryを使用してチェックボックス値に基づいてテキストフィールドを無効にする方法

  26. 26

    チェックボックスに基づいて、ブートストラップボタンを無効からアクティブに変更します

  27. 27

    チェックボックスのステータスに基づいてラベルの色を変更する

  28. 28

    内部のテキストの長さに基づいてボックスの高さを変更します

  29. 29

    画面サイズに基づいてブートストラップのチェックボックスラベルを変更する

ホットタグ

アーカイブ