javascript – 复选框：勾选我！

在我的形式中,这是一个小但非常烦人的故障.

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

但是(图表变浓),如果在表单中选中了另一个复选框,则可以选中触发器复选框并显示额外选项,但如果未选中,则额外选项将不会消失！

(对不起,这很长,但我想说清楚！)

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

解决方法:

怎么样更换

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

同

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

Checks the current selection against
an expression and returns true, if at
least one element of the selection
fits the given expression.

编辑：
更换

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

javascript – 复选框：勾选我！

相关推荐