Question

当我选中一个复选框时，我试图在jQuery中隐藏一行。它可以工作，但只适用于带有ID的第一行，而不是其他行。你知道为什么吗？

$(document).ready(function () {
    $('#XL_TCG').change(function () {
        if (!this.checked) 
            $('#TCG').fadeIn('slow');
        else 
            $('#TCG').fadeOut('slow');
    });
    $('#XL_TCG').change();
});

我的HTML：

<table>
   <tbody>
      <tr id="TCG">
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
      <tr>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr id="TCG">
         <td>Data 5</td>
         <td>Data 6</td>
      </tr>
   </tbody>
</table>

谢谢：）

Answer 1

ID 用于单个元素识别，请使用类选择多个元素。

$(document).ready(function () {
    $('#XL_TCG').change(function () {
        if (!this.checked) 
            $('.abc').fadeIn('slow');
        else 
            $('.abc').fadeOut('slow');
    });
    $('#XL_TCG').change();
});

<table>
   <tbody>
      <tr id="TCG" class="abc">
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
      <tr>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr id="TCG" class="abc">
         <td>Data 5</td>
         <td>Data 6</td>
      </tr>
   </tbody>
</table>

Answer 2

您不能拥有多个具有相同ID的元素。 ID必须是唯一的，否则您的网页将无法正常运行。对于多个项目，请改用类。

＆＃13;

$(document).ready(function () {
    $('#XL_TCG').change(function () {
        if (!this.checked) 
            $('.TCG').fadeIn('slow');
        else 
            $('.TCG').fadeOut('slow');
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type='checkbox' id='XL_TCG'>

<table>
   <tbody>
      <tr class="TCG">
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
      <tr>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr class="TCG">
         <td>Data 5</td>
         <td>Data 6</td>
      </tr>
   </tbody>
</table>

＆＃13;

Answer 3

ID只能解决一次，您需要更改代码并将TCG用作类：

methods_dict = {'NastyObject1': ['do_thing', ......]
                'NastyObject2': ['do_other_thing', .......]
                'NastyObject3': [.......]}

更改HTML

$(document).ready(function () {
$('#XL_TCG').change(function () {
    if (!this.checked) 
        $('.TCG').fadeIn('slow'); // change to class selector
    else 
        $('.TCG').fadeOut('slow');
});
 $('#XL_TCG').change();
});

Answer 4

在多个地方使用相同的id会导致您的HTML无效，并且您的网站将因此受到惩罚。

使用您当前的HTML代码，您将能够使其正常工作：

$(document).ready(function () {
    $('[id=XL_TCG]').change(function () {
        if (!this.checked) 
            $('[id=XL_TCG]').fadeIn('slow');
        else 
            $('[id=XL_TCG]').fadeOut('slow');
    });
    $('#XL_TCG').change();
});

区别在于您使用#XL_TCG的选择器。这种选择器知道你指的是一个id并将搜索它，直到找到第一个匹配，然后它停止。使用[id=XL_TCG]的属性值选择器不知道您正在搜索id，并且不会假设存在单个匹配项。尝试一下，尝试一下成功。但是你没有完成你的任务。将之前称为id的事物称为class，因为这是您打算如何使用它并相应地更新代码：

HTML

<table>
   <tbody>
      <tr class="TCG">
         <td>Data 1</td>
         <td>Data 2</td>
      </tr>
      <tr>
         <td>Data 3</td>
         <td>Data 4</td>
      </tr>
      <tr class="TCG">
         <td>Data 5</td>
         <td>Data 6</td>
      </tr>
   </tbody>
</table>

JS

$(document).ready(function () {
    $('#XL_TCG').change(function () {
        if (!this.checked) 
            $('#TCG').fadeIn('slow');
        else 
            $('#TCG').fadeOut('slow');
    });
    $('#XL_TCG').change();
});

使用jquery中的复选框隐藏行

4 个答案:

HTML

JS