在复选框类型中单击后选择文本框

时间:2013-11-14 11:39:27

标签: javascript jquery html css twitter-bootstrap

我正在使用twitter bootstrap。 我想以两种方式关注文本框:

  1. 点击对应的复选框或
  2. 点击文本框
  3. 这两种情况都不起作用。

    See this fiddle.

    CSS:bootstrap-3.0.0

    HTML:

    <div class='container'>
        <div class="checkbox">
            <label>
                <input type="checkbox" value="" />option1
            </label>
        </div>
        <div class='checkbox'>
            <label>
                <input type="checkbox" value="" />
                <form role="form">
                    <div class="row">
                        <div class="col-xs-2">
                            <input type="text" class="form-control" placeholder="Specify" />
                        </div>
                    </div>
                </form>
            </label>
        </div>
    </div>
    

1 个答案:

答案 0 :(得分:2)

如果你可以在这里添加jquery,那就是:

$(document).ready(function(){
    $("#check_1").on("change",function(){
        if($(this).is(":checked"))
        {
            $("#text_1").focus();
        }
    });
});

您的HTML :(已添加id属性)

<div class='container'>
<div class="checkbox">
    <label>
        <input type="checkbox" value="" />option1
    </label>
</div>
<div class='checkbox'>
    <label>
        <input type="checkbox" value="" id="check_1" />
        <form role="form">
            <div class="row">
                <div class="col-xs-2">
                    <input type="text" class="form-control" placeholder="Specify" id="text_1" />
                </div>
            </div>
        </form>
    </label>
</div>
</div>

更新小提琴: http://jsfiddle.net/Wr6tH/13/