如何使用jQuery显示/隐藏复选框选中/未选中状态的元素？答案

【问题标题】：How to show/hide an element on checkbox checked/unchecked states using jQuery?如何使用jQuery显示/隐藏复选框选中/未选中状态的元素？
【发布时间】：2013-08-19 06:06:42
【问题描述】：

我有这个代码：

   <fieldset class="question">
       <label for="coupon_question">Do you have a coupon?</label>
       <input class="coupon_question" type="checkbox" name="coupon_question" value="1" />
       <span class="item-text">Yes</span>
   </fieldset>

   <fieldset class="answer">
       <label for="coupon_field">Your coupon:</label>
       <input type="text" name="coupon_field" id="coupon_field"/>
   </fieldset>

并且我想在单击字段集“问题”中的复选框后显示/隐藏“答案”字段集（默认为隐藏）如何做到这一点。我无法使用经典元素的技术来做到这一点，例如：

<script>
    $().ready(function(){

        $('.question').live('click',function() {
                 $('.answer').show(300);
            }
            ,
            function(){
                $('.answer').hide(200);
            }
        );

    });
</script>

有人可以帮助我如何使用复选框来做到这一点吗？如果可能的话，在隐藏时取消（取消选中）复选框。

【问题讨论】：

：请注意 .live() 自 jQuery 1.7 版以来已弃用，而是使用 Arun 的答案中给出的 .on()

标签： jquery

【解决方案1】：

将onchange 事件附加到复选框：

<input class="coupon_question" type="checkbox" name="coupon_question" value="1" onchange="valueChanged()"/>

<script type="text/javascript">
    function valueChanged()
    {
        if($('.coupon_question').is(":checked"))   
            $(".answer").show();
        else
            $(".answer").hide();
    }
</script>

【讨论】：

【解决方案2】：

试试这个

$(".answer").hide();
$(".coupon_question").click(function() {
    if($(this).is(":checked")) {
        $(".answer").show(300);
    } else {
        $(".answer").hide(200);
    }
});

FIDDLE

【讨论】：

+1 用于隐藏 jquery 而不是 display:none;在 CSS 中。这似乎是正确的方法，以防万一某些用户可能禁用了 js。
@EswaraReddy，+1，这是我迄今为止找到的最佳答案
@lmiguelvargasf 谢谢。

【解决方案3】：

最简单 - 我也将复选框类更改为 ID：

$(function() {
  $("#coupon_question").on("click",function() {
    $(".answer").toggle(this.checked);
  });
});

.answer { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<fieldset class="question">
  <label for="coupon_question">Do you have a coupon?</label>
  <input id="coupon_question" type="checkbox" name="coupon_question" value="1" />
  <span class="item-text">Yes</span>
</fieldset>

<fieldset class="answer">
  <label for="coupon_field">Your coupon:</label>
  <input type="text" name="coupon_field" id="coupon_field" />
</fieldset>

【讨论】：

【解决方案4】：

试试

$(document).ready(function(){
    //Register click events to all checkboxes inside question element
    $(document).on('click', '.question input:checkbox', function() {
        //Find the next answer element to the question and based on the checked status call either show or hide method
        $(this).closest('.question').next('.answer')[this.checked? 'show' : 'hide']()
    });

});

演示：Fiddle

或者

$(document).ready(function(){
    //Register click events to all checkboxes inside question element
    $(document).on('click', '.question input:checkbox', function() {
        //Find the next answer element to the question and based on the checked status call either show or hide method
        var answer = $(this).closest('.question').next('.answer');

        if(this.checked){
            answer.show(300);
        } else {
            answer.hide(300);
        }
    });

});

【讨论】：

你的例子太复杂了（对于初学者来说很难理解的术语；虽然它可能是一段高效的代码），请你评论一下。我需要运行不同的东西，除了显示和隐藏。这是做我想做的事情的唯一方法吗？

【解决方案5】：

试试这个

<script>
    $().ready(function(){
        $('.coupon_question').live('click',function() 
        {
            if ($('.coupon_question').is(':checked')) {
                $(".answer").show();
            } else {
                $(".answer").hide();
            } 
        });
    });
</script>

【讨论】：

【解决方案6】：

$(document).ready(function() {
    $(document).on("click", ".question", function(e) {
       var checked = $(this).find("input:checkbox").is(":checked");
       if (checked) {
           $('.answer').show(300);
       } else {
           $('.answer').hide(300);
       }
    });
});

【讨论】：

【解决方案7】：

    <label  onclick="chkBulk();">
    <div class="icheckbox_flat-green" style="position: relative;">
      <asp:CheckBox ID="chkBulkAssign" runat="server" class="flat" 
       Style="position: 
         absolute; opacity: 0;" />
      </div>
      Bulk Assign
     </label>



    function chkBulk() {
    if ($('[id$=chkBulkAssign]')[0].checked) {
    $('div .icheckbox_flat-green').addClass('checked');
    $("[id$=btneNoteBulkExcelUpload]").show();           
    }
   else {
   $('div .icheckbox_flat-green').removeClass('checked');
   $("[id$=btneNoteBulkExcelUpload]").hide();
   }

【讨论】：