Question

我试图根据复选框当前值，如果选中或未检查更改文本值，则应向用户说明可查看文本的值。这就是我的想法，我认为我已经接近但它无法正常工作。

<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>

Answer 1

尝试

$(document).ready(function(){
            $('input[type="checkbox"]').click(function(){
                if($(this).is(":checked"))
                {
                alert("checked");
                }
                else{
                alert("Un-checked");
                }
                if($(this).val()=="red"){
                    //$(".Color").toggle();
                }
                else if($(this).val()=="blue"){
                    //$(".Color").toggle();
                }

            });
        });

DEMO

Answer 2

试试这个：

$('input[type="checkbox"]').change(function(e){
  if ($(this).is(':checked')) {
    $('.' + $(this).val()).toggle();
  }
});

这假设您的input值与您的div类名称相同。

Answer 3

你在找这样的东西吗？

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    </head>
    <body>
    <style type="text/css">
        .red    { display: none;}
        .blue   { display: none;}
    </style>
    <script>
        $(document).ready(function(){
            $('input[type="checkbox"]').click(function(){

                $(".color").each(function(){
                    $(this).hide();
                });

                if($(this).is(":checked")){
                    var color = $(this).attr("value");
                    $("."+color).show();
                }

            });
        });
    </script>
    <div>
        <input type="checkbox" name="colorCheckbox" value="red"> red
        <input type="checkbox" name="colorCheckbox" value="blue"> blue
    </div>
    <div class="color red">You have selected <strong>red checkbox</strong></div>
    <div class="color blue">You have selected <strong>blue checkbox</strong> </div>
    </body>
</html>

Answer 4

不确定你要做什么但我稍微修改了你的示例代码/ 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/

根据复选框值更改文本

4 个答案: