Question

我试图制作一个包含复选框问题＆＃34;是＆＃34;或＆＃34;不＆＃34;。如果用户回答了复选框＆＃34;是＆＃34;，表单的其余部分将显示，但如果用户回答＆＃34;否＆＃34;然后表格的其余部分将保留隐藏的属性。

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

这两个代码都运行良好，但我似乎无法让它们协同工作。我很乐意为此提供一些帮助。我希望用户只选择一个复选框，并隐藏字段，直到用户检查＆＃34;是＆＃34;选项。＆＃34; no＆＃34;默认情况下应选中选项。请随时询问任何进一步的解释或信息。

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

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

Answer 2

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: