Question

我目前有一个复选框，一旦检查完毕，会出现一些div元素。我想点击它后隐藏复选框，只显示div元素。

这是我的HTML：

<div>
<label>Check the box to agree to our terms. After agreeing, you will be able to view our products and checkout.<input name="colorCheckbox" type="checkbox" value="red" /></label>
</div>
<div class="red box">content shows up here</div>

这是我的Javascript：

<script type="text/javascript">
    $(document).ready(function(){
        $('input[type="checkbox"]').click(function(){
            if($(this).attr("value")=="red"){
                $(".red").toggle();
            }
        });
    });
</script>

我感谢任何帮助。

Answer 1

您可以参考this

隐藏该复选框

$(document).ready(function () {
    $('input[type="checkbox"][value="red"]').click(function () {
        $(".red").show();
        $(this).hide()
    });
});

演示：Fiddle

另请注意，更改处理程序仅添加到值为红色的复选框，而不是针对所有复选框

Answer 2

这是一个可以在重新加载后继续存在的版本

$(function () {
  $('input[name="colorCheckbox"]').on("click",function () {
    $("."+this.value).toggle(this.checked);
    $(this).toggle(!this.checked);
  }).triggerHandler("click"); // initialise
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<label>Check the box to agree to our terms. After agreeing, you will be able to view our products and checkout.<input name="colorCheckbox" type="checkbox" value="red" /></label>
</div>
<div class="red box">content shows up here</div>

单击后隐藏复选框

2 个答案: