单击时复选框隐藏行答案

【问题标题】：checkbox hide row when click单击时复选框隐藏行
【发布时间】：2014-12-10 19:12:52
【问题描述】：

单击复选框时尝试隐藏行时遇到问题。问题是单击时消失，我想在单击时显示它。谁能告诉我有什么问题？

我有这个 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>

【问题讨论】：

$('.red')[$(this).is(':checked')?'hide':'show']()?

标签： javascript jquery html checkbox show-hide

【解决方案1】：

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

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

【讨论】：

@Fora，欢迎您。如果这回答了您的问题，请接受。

【解决方案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
        }
    });
});

【讨论】：

【解决方案3】：

您可以使用 css 类和 .toggleClass('hide') 而不是 .toggle()。

jsfiddle

【讨论】：

这样做有什么好处？
它只会使用 css 而不是 JS。我在网上找到了这个来显示使用 toggleClass() 与 toggle() 的比较。不确定它是否完全适合这种情况。 jsperf.com/jquery-toggle-elements-vs-toggleclass-css-toggling/2

【解决方案4】：

在文档准备就绪时，根据.red 可见性保持复选框的选中/未选中状态：

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

 $('input[type="checkbox"]').prop("checked", $(".red").is(":visible"));

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

【讨论】：