如何使用jquery隐藏HTML表格？

Question

我的代码需要根据另一个字段输入显示/隐藏整个表，但由于某种原因它无法正常工作。 这种代码适用于常规div元素。表有什么不同？

$(function() {
  $('#DD').change(function() {
    if ($(this).val() == "Yes") {
      $('#hiddenTable').show();
    } else {
      $('#hiddenTable').hide();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="DD" id="DDid" class="DDclass">
  <div style="padding-bottom:2%; font-family: 'Josefin Sans', sans-serif;font-size: 100%;">
    Have you contacted or been contacted by our customer service team?<br>
    <select name="DD2" id="DDid2" class="DDclass2">
      <option value="No" >No</option>
      <option value="Yes" >Yes</option>
    </select>
  </div>
</div>

<table class="hiddenTable" id="hiddenTable" style="display:none;">
  <tr>
    <th></th>
    <th>Strongly Agree</th>
    <th>Somewhat Agree</th>
    <th>Neither Agree nor Disagree</th>
    <th>Somewhat Disagree</th>
    <th>Strongly Disagree</th>
    <th>Not Applicable</th>
  </tr>
  <tr>
    <td>I received answer(s) quickly</td>
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Strongly Agree" data-col="1"></td>
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Somewhat Agree" data-col="2"></td>
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Neither Agree nor Disagree" data-col="3"></td>
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Somewhat Disagree" data-col="4"></td>
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Strongly Disagree" data-col="5"></td>
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Not Applicable" data-col="6"></td>
  </tr>
</table>

Answer 1

使用此代码：

您需要将ID $('#DD').change(function(){更改为$('#DDid2').change(function(){

＆＃13;

＆＃13;

$(function() {
    $('#DDid2').change(function(){
        if ($(this).val() == "Yes") 
        {
            $('#hiddenTable').show();
        } else {
            $('#hiddenTable').hide();
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="DD" id="DDid" class="DDclass">
      <div style="padding-bottom:2%; font-family: 'Josefin Sans', sans-serif;font-size: 100%;">
      Have you contacted or been contacted by our customer service team?
        <br>
      <select name="DD2" id="DDid2" class="DDclass2">
       <option value="No" >No</option>
       <option value="Yes" >Yes</option>
     </select>
      </div>
     </div>


 <table class="hiddenTable" id="hiddenTable" style="display:none;">
<tr>
    <th></th>
    <th>Strongly Agree</th>
    <th>Somewhat Agree</th>
    <th>Neither Agree nor Disagree</th>
    <th>Somewhat Disagree</th>
    <th>Strongly Disagree</th>
    <th>Not Applicable</th>
</tr>
<tr>
    <td>I received answer(s) quickly</td>
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Strongly Agree" data-col="1"></td>
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Somewhat Agree" data-col="2"></td>
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Neither Agree nor Disagree" data-col="3"></td>
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Somewhat Disagree" data-col="4"></td>
    <td><input type="radio" class="myCheckbox1" id="0" name="QuickAnswers" value="Strongly Disagree" data-col="5"></td>
    <td><input type="radio" class="myCheckbox2" id="0" name="QuickAnswers" value="Not Applicable" data-col="6"></td>
</tr>
</table>

＆＃13;

＆＃13;

＆＃13;