根据选中的复选框隐藏/显示内容答案

【问题标题】：Hide/show content depending on selected checkbox根据选中的复选框隐藏/显示内容
【发布时间】：2014-12-16 18:31:24
【问题描述】：

我正在尝试制作一个包含“是”或“否”复选框问题的表单。如果用户回答“是”复选框，则表单的其余部分将显示，但如果用户回答“否”，则表单的其余部分将保留隐藏属性。

我有这个小提琴http://jsfiddle.net/Eliasperez/c3ay7jdy/2/

两个代码都很好用，但我似乎无法让它们一起工作。我很想在这方面得到一些帮助。我希望用户只选择一个复选框并隐藏字段，直到用户选中“是”选项。默认情况下应选中“否”选项。如有任何进一步的解释或信息，请随时询问。

<script>
   $("#CAT_Custom_1186889_1").change(function(){
   var self = this;
   $("#tableID tr.rowClass").toggle(!self.checked); 
   }).change();

   $('input[type="checkbox"]').on('change', function () {
     $('input[name="' + this.name + '"]').not(this).prop('checked', false);
   });
</script>
<table id="tableID">
   <tbody>
      <tr>
         <td>
            <label class="label16">¿Cuentas con Embajador Blive?</label>
            <br />
            <input type="checkbox" name="CAT_Custom_1186889" id="CAT_Custom_1186889_0" value="Si" class="boxcheck">Si &nbsp; &nbsp; &nbsp; &nbsp;
            <input checked="checked" type="checkbox" name="CAT_Custom_1186889" id="CAT_Custom_1186889_1" value="No" class="boxcheck">No
            <br />
            <br />
            <br />
         </td>
      </tr>
      <tr class="rowClass">
         <td>This 2 rows will disapear! </td>
      </tr>
      <tr  class="rowClass">
         <td>This 2 rows will disapear!</td>
      </tr>
   </tbody>
</table>

【问题讨论】：

Elias，你写问题的方式表达了你对获得答案的关心程度以及你对提供答案的人的尊重程度。下次，请考虑查看您的帖子以了解基本拼写和语法问题。标点符号对读者很有帮助。
如果您希望用户只能进行一项选择，请使用单选按钮。
另外，考虑使用 CSS 而不是 &nbsp; 和 <br>。 commitstrip.com/en/2014/12/12

标签： javascript jquery html checkbox show-hide

【解决方案1】：

添加if条件：

if ($(this).val()=="Si"){/*Show the form*/}

$("#CAT_Custom_1186889_1").change(function(){
    var self = this;
    $("#tableID tr.rowClass").toggle(!self.checked); 
}).change();

  $('input[type="checkbox"]').on('change', function () {
      if ($(this).val()=="Si"){
          $(".rowClass").show();
      }
      $('input[name="' + this.name + '"]').not(this).prop('checked', false);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableID">
    <tbody>
             <tr>
                <td>
                    <label class="label16">¿Cuentas con Embajador Blive?</label>
                    <br />
                    <input type="checkbox" name="CAT_Custom_1186889" id="CAT_Custom_1186889_0" value="Si" class="boxcheck">Si &nbsp; &nbsp; &nbsp; &nbsp;
                    <input checked="checked" type="checkbox" name="CAT_Custom_1186889" id="CAT_Custom_1186889_1" value="No" class="boxcheck">No
                    <br />
                    <br />
                    <br />
                </td>
            </tr>
        <tr class="rowClass">
            <td>This 2 rows will disapear! </td>
         
        </tr>
        <tr  class="rowClass">
            <td>This 2 rows will disapear!</td>
           
        </tr>
    </tbody>
</table>

【讨论】：

完美！非常感谢您！！现在效果很好！

【解决方案2】：

如果您希望用户只从多个选项中做出一个选择，请使用单选按钮，而不是复选框。用户对界面有一定的期望，使用复选框会违反直觉。

这是您可以使用的代码：

$('input[name="CAT_Custom_1186889"]').change(function () {
    var self = this;
    console.log(this.value)
    $("#tableID tr.rowClass").css('display', (this.value == 'Si') ? 'block' : 'none');
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableID">
    <tbody>
        <tr>
            <td>
                <label class="label16">¿Cuentas con Embajador Blive?</label>
                <br />
                <input type="radio" name="CAT_Custom_1186889" id="CAT_Custom_1186889_0" value="Si" class="boxcheck">Si &nbsp; &nbsp; &nbsp; &nbsp;
                <input checked="checked" type="radio" name="CAT_Custom_1186889" id="CAT_Custom_1186889_1" value="No" class="boxcheck">No
                <br />
                <br />
                <br />
            </td>
        </tr>
        <tr class="rowClass">
            <td>This 2 rows will disapear!</td>
        </tr>
        <tr class="rowClass">
            <td>This 2 rows will disapear!</td>
        </tr>
    </tbody>
</table>

【讨论】：