复选框:给我打电话!

Question

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

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

然而(情节变厚),如果另一个复选框以托运形式,触发复选框可以检查和额外的选项出现,但如果不加以制止额外的选项不会dissapear!

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

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

是

根据表达式检查当前选择,如果选择的至少一个元素适合给定表达式,则返回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>

你的代码工作正常.

工作演示