复选框在单击时隐藏行

checkbox hide row when click

本文关键字：隐藏 单击 复选框      更新时间：2023-09-26

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

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

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

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

说，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
        }
    });
});

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

斯菲德尔

在文档准备就绪时，根据.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>

相关文章：