Question

我在单击复选框时尝试隐藏行时遇到问题。问题是点击时消失了，我想在点击时显示它。任何人都可以告诉我这个问题是什么？

我有这个JavaScript代码：

    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('input[type="checkbox"]').click(function(){
                if($(this).attr("value")=="red"){
                    $(".red").toggle();
                }
            });
        });
    </script>

和这个HTML代码：

<div class="custom-checkbox-holder">
    <label><input class="custom-checkbox" type="checkbox"  value="red"><span>Devuelvo el auto en otra ciudad</span></label>
</div>
<div class="destination-field red">
    <div class=" gap-small">
        <label>Ciudad de devolución</label>
        <br />
        <input id="destination" type="text" placeholder="Dónde desea entregar el vehículo" />
    </div>
</div>

Answer 1

您只需在DOM加载后隐藏.red元素：

    $(document).ready(function(){
        ///add this///
        $(".red").hide();
        //////////////
        $('input[type="checkbox"]').click(function(){
            if($(this).attr("value")=="red"){
                $(".red").toggle();
            }
        });
    });

Answer 2

我会说，hide / show .red取决于您的复选框的状态：

$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).attr("value")=="red"){
            $('.red')[$(this).is(':checked')?'hide':'show'](); // Show / hide depending on checkbox status
        }
    });
});

Answer 3

您可以使用css类和.toggleClass('hide')代替.toggle()。

jsfiddle

Answer 4

在准备好文档时，根据.red可见性

，选中/取消选中复选框的状态

＆＃13;

 $('input[type="checkbox"]').click(function() {
   $(".red").toggle($(this).prop("checked"));
 });

 $('input[type="checkbox"]').prop("checked", $(".red").is(":visible"));

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="custom-checkbox-holder">
  <label>
    <input class="custom-checkbox" type="checkbox" value="red"><span>Devuelvo el auto en otra ciudad</span>

  </label>
</div>
<div class="destination-field red">
  <div class=" gap-small">
    <label>Ciudad de devolución</label>
    <br />
    <input id="destination" type="text" placeholder="Dónde desea entregar el vehículo" />
  </div>
</div>

＆＃13;

复选框在单击时隐藏行

4 个答案: