Question

我试图隐藏/显示一个元素，具体取决于是否已检查组中的一个或多个复选框，我需要使用change事件在任何复选框更改后触发它。

这就是我所拥有的：

// List of my checkboxes (first 7)
var group = $('#ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1 input:lt(7)');


group.change(function () {
    if (group.filter(':checked').length > 0) {
    $("#ctl00_ContentPlaceHolder1_Common1_cbl_1_4_What_is_the_rationale_for_such_prioritisation_divContainer").show();
    }
    else {
    $("#ctl00_ContentPlaceHolder1_Common1_cbl_1_4_What_is_the_rationale_for_such_prioritisation_divContainer").hide();
    }
});

HTML：

<table id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1" class="text" style="width:500px;">
    <tbody><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_0"><span class="checked"><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_0" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$0" checked="checked" value="A) General education (compulsory / upper secondary)" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_0">A) General education (compulsory / upper secondary)</label></td>
    </tr><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_1"><span class="checked"><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_1" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$1" checked="checked" value="B) Initial VET" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_1">B) Initial VET</label></td>
    </tr><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_2"><span><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_2" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$2" value="C) Continuing VET" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_2">C) Continuing VET</label></td>
    </tr><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_3"><span><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_3" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$3" value="D) Adult education" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_3">D) Adult education</label></td>
    </tr><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_4"><span><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_4" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$4" value="E) Higher education" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_4">E) Higher education</label></td>
    </tr><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_5"><span><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_5" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$5" value="F) Labour market sectors – please specify sector / branch if applicable" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_5">F) Labour market sectors – please specify sector / branch if applicable</label></td>
    </tr><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_6"><span><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_6" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$6" value="G) Third sector – please specify, e.g. youth sector, voluntary sector etc. if applicable" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_6">G) Third sector – please specify, e.g. youth sector, voluntary sector etc. if applicable</label></td>
    </tr><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_7"><span><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_7" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$7" value="H) No priority (all sectors are similarly prioritised)" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_7">H) No priority (all sectors are similarly prioritised)</label></td>
    </tr><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_8"><span><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_8" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$8" value="I) No priority (there is little activity in all sectors)" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_8">I) No priority (there is little activity in all sectors)</label></td>
    </tr><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_9"><span><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_9" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$9" value="J) Information not available" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_9">J) Information not available</label></td>
    </tr><tr>
        <td><div class="checker" id="uniform-ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_10"><span><input id="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_10" type="checkbox" name="ctl00$ContentPlaceHolder1$Common1$cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation$CheckBoxList1$10" value="K) Do not know" style="opacity: 0;"></span></div><label for="ctl00_ContentPlaceHolder1_Common1_cbl_1_3_Are_any_sectors_prioritised_in_your_country_in_the_area_of_validation_CheckBoxList1_10">K) Do not know</label></td>
    </tr>
</tbody></table>

这似乎不起作用，什么都不做。有什么想法吗？

Answer 1

在onchange复选框中，您可以执行以下操作

if ($(".checker input:checkbox:checked").length > 0)
{
    // any one is checked
}
else
{
   // none is checked
}

Answer 2

修改

你确实只是拼错你的选择器，简单的错误:) 如果某些事情不对，那么它不会立即出现错误，但你必须能够看到有时无法看到的东西，因为这不会给你任何错误，但它也不起作用。

你可以通过检查的第一件事是检查元素是否在文档中，如果你使用正确的属性来定位它，那么你也可以检查拼写错误。

选择这么长的选择器并不是很正常，我认为它们是动态创建的，但如果是这种情况，那就更像是时间炸弹而不是你想象的，因为你的JS将无缘无故地停止工作再次更新创建选择器的代码时。

我的建议是缩短您的选择器或对其进行硬编码，以便它们永远不会更改（使用class之类的其他属性？） - 如果您的ID 是动态创建的''迟早会遇到这个问题（除非你动态生成执行这个的jQuery代码，我猜）

ORIGINAL

刚刚创建了一个快速摘要，说明如何使用onchange处理程序通过jQuery on()

实现此功能

您的脚本可能无法正常工作的主要原因是

过于复杂的选择器，拼写错误（一个字符足以错配）
没有$(function() { ... })用于检查$(document).ready(fn)处理程序是否已被解雇。

注意：这是一个包含CSS的示例，您希望使用自己的样式

$(function() { // equivelant of $(document).ready(fn)
  $('#toggle').css('display', 'none');
  var cb_group = $('.test-cb:lt(7)').on('change', function() {
    if (cb_group.filter(':checked').length)
      $('#toggle').show();
    else
      $('#toggle').hide();
  });
});

#toggle {
  width: 300px;
  height: 200px;
  border: 2px solid #ddd;
  line-height: 200px;
  text-align: center;
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
1. <input type="checkbox" class="test-cb" name="checkbox" /><br />
2. <input type="checkbox" class="test-cb" name="checkbox" /><br />
3. <input type="checkbox" class="test-cb" name="checkbox" /><br />
4. <input type="checkbox" class="test-cb" name="checkbox" /><br />
5. <input type="checkbox" class="test-cb" name="checkbox" /><br />
6. <input type="checkbox" class="test-cb" name="checkbox" /><br />
7. <input type="checkbox" class="test-cb" name="checkbox" /><br />
8. <input type="checkbox" class="test-cb" name="checkbox" /><br />
9. <input type="checkbox" class="test-cb" name="checkbox" />

<div id="toggle">Test</div>

jQuery检查是否选中了前7个复选框之一，然后隐藏元素

2 个答案:

修改

ORIGINAL