javascript - 当文本框模糊且为空时隐藏文本框

Question

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

这是代码

$('.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>

和 fiddle :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:全部
• 歌剧:9+
• 即:9+
• Android:全部
• iOS:全部