Question

我创建了一个包含多个选项的复选框组，最后一个是＆＃34;其他＆＃34;，它应该在选中时显示文本输入并在未选中时隐藏它。此外，如果您从文本输入模糊并且为空，则应隐藏自身并取消选中该选项。它主要起作用，但是当你取消选中复选框并且文本字段为空时它会隐藏并再次出现，我想它是因为触发了几个事件，但我找不到原因。

这是代码

$('.last').on('change','input',function(e){
    check=$(this).prop('checked');
    $container_text=$('.other');

    $container_text.toggle(check);
    if (check) {
        $container_text.find('input').focus();
    }


});

$('.other input').on('blur',function(){

    if ($(this).val()=='') {
        $check_pare=$('.last input');
        $check_pare.prop('checked', false);
        $(this).closest('.other').hide();
    }
});

输入

<label><input type="checkbox" name="test[]" value="Test 1"/> Test 1</label>
<span class="last">
<label><input type="checkbox" name="test[]" value="Other"/> Other</label>
</span>
<span class="other" ><input type="text" name="Other" value=""/></span>

和小提琴：http://jsfiddle.net/43ceyd9j/1/

Answer 1

你可以在纯CSS中实现这一点，但是你必须为IE 8及以下版本构建优雅的降级。

<强> HTML

<input type="checkbox" name="test[]" value="Test 1" id="checkbox-one"/>
<label for="checkbox-one">Test 1</label>
<input type="checkbox" name="test[]" value="Other" id="checkbox-two" />
<label for="checkbox-two">Other</label>
<span class="other" ><input type="text" name="Other" value=""/></span>

<强> CSS

.other{
    display:none;
}

input[type=checkbox]:checked + label + span {
    display: block;
}

通过在输入中添加for属性和id属性，您可以在CSS中使用兄弟选择器。

浏览器支持

Chrome：全部
Safari：3.1 +
Firefox：全部
Opera：9 +
IE：9 +
Android：全部
iOS：全部

当文本框模糊并且它为空时隐藏文本框

1 个答案: