Question

这是一个小的，但非常恼人的，在我的形式中出现故障。

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

然而（图表变浓），如果在表单中选中了另一个复选框，则可以选中触发器复选框并显示额外选项，但如果未选中，则额外选项将不会消失！ < / p>

（对不起，这很长，但我想说清楚！）

这是我简单的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())

与

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

is

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

<强> 编辑： 取代

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 2

这可能与此行有关：

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

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

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

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();
});

复选框：给我打电话！

3 个答案: