根据选定的复选框隐藏/显示内容

Hide/show content depending on selected checkbox

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

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

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

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

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

以下是您可以使用的代码：

$('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>

相关文章：