复选框：勾选我！

Question

这是我表单中的一个小故障，但非常烦人。

我有一个复选框，如果单击它会显示其他复选框和输入字段，供用户添加更多信息。如果未单击此触发器复选框，则额外选项将消失。

但是（情节变粗），如果在表单中选中了另一个复选框，则可以选中触发复选框并出现额外的选项，但如果不选中，额外的选项不会消失！

（对不起，啰嗦了，但我想清楚！）

这是我的简单 Jquery 代码：

$(function() {

    var boxes = $('.obstruct-opt');
    boxes.hide();

    var ob = $('li.obstructionOptions').children().eq(0);

    ob.change(function() {
    if ($('$(this):checked').val()) {
        boxes.show();
    }
    else {
        boxes.hide();
    }
    });

});

我尝试了不同的方法来检查触发器是否被选中，但欢迎提出任何建议。

编辑 请求的 HTML：（虽然简化为我的 ASP.Net 转发器控件生成它）

<ul>
<li class="obstructionOptions">                   

<span>
<input id="Obstruction" type="checkbox" name="Obstruction" />
<label for="Obstruction">Obstruction</label>
</span>

<span class="obstruct-opt">
<input id="WeatherProof" type="checkbox" name="WeatherProof"/>
<label for="WeatherProof">WeatherProof</label>
</span>

<span class="obstruct-opt">
<input id="WeatherProofFlap" type="checkbox" name="WeatherProofFlap"/>
</span>

</li>

<li class="obstruct-opt">
<span>Obstruction Notes</span>
<textarea name="ObstructionNotes" rows="7" cols="50" id="ObstructionNotes"/>           
</li>
</ul>

希望对你有帮助！

更新： 将 if 条件替换为

if ($(this).is(":checked")) {

不会触发任何东西，看不到任何出现或消失的行为。 感谢您的建议，也许通过我的html您可以看出原因？

更新 好的，在发布我的 HTML 后，我意识到 ASP.Net 一直在缝合我！ 如您所见，我选择“ob”对象作为第一个孩子，但第一个孩子是生成的跨度！ ASP 一直在将我的复选框包装在跨度中，我从未怀疑过！精明！

我最后使用了这段代码：

  $('ul li.obstructionOptions span').children().eq(0).click(function() {
        if ($(this).is(":checked")) {
                boxes.show();
            }
            else {
                boxes.hide();
            }
    });

感谢adamantium，因为这完美地解决了问题！

问题解决了！

不要相信 ASP.Net 我的标记！！！

Answer 1

这可能与这一行有关：

if ($('$(this):checked').val()) {

AFAIK，这不会做任何有用的事情。你可能想要这个：

if ($(this).is(":checked")) {

Answer 2

怎么换

if ($('$(this):checked').val())

与

if ($(this).is(':checked'))

is

检查当前选择 一个表达式并返回真，如果在 选择的至少一个元素 适合给定的表达式。

编辑： 替换

var ob = $('li.obstructionOptions').children().eq(0);

与

var ob = $('ul li.obstructionOptions span').children().eq(0);

和

<textarea name="ObstructionNotes" rows="7" cols="50" id="ObstructionNotes"/>

与

<textarea name="ObstructionNotes" rows="7" cols="50" id="ObstructionNotes"></textarea>

您的代码运行良好。

Working Demo

Answer 3

ob.change(

复选框的onchange 在没有焦点之前不会在 IE 中触发。因此，通常使用 onclick 代替。

$('$(this):checked').val()

不起作用有两个原因。首先，您已将$(this) 作为字符串的一部分。美元和括号对选择器没有任何意义，所以 jQuery 不会匹配任何东西。你已经得到了你想要的this 对象；您无需再选择任何内容。其次，复选框上的val() 获取该复选框的值，而不是它是否被选中。这是value 属性，或者on，如果您没有指定的话。

虽然您可以使用 if ($(this).is(':checked')) 测试检查性，但仅使用标准 DOM checked 属性更具可读性和更快。你没有必须将你所做的一切都塞进jQuery中。

ob.click(function() {
    if (this.checked)
        boxes.show();
    else
        boxes.hide();
});