一、关于label标签的for属性

关于label的for属性可以看这里
简单来说就是点击label之后可以让for指向的元素获得焦点；
但这个功能有点鸡肋，for属性只能写id，所以接下来就让for也能支持各种选择器
例如：

<div>
    <label for="input1">点我</label>
    <input id="input1" type="text" name="name" value="" />
</div>
<hr />
<div>
    <label for=".input2">点我</label>
    <input class="input2" type="text" name="name" value="" />
</div>
<hr />
<div>
    <label for="nextAll(':input:first')">点我</label>
    <span></span>
    <input type="text" name="name" value="" />
</div>

二、代码

(function () {
    $(() => {
        $(document).on("click", "label[for]", e => {
            const selected = $(e.target).attr("for");
            if (document.getElementById(selected)) {
                return;
            }

            try {
                const jq = eval(`(function(e){ return e.${selected} })`)($(e.target));
                if (jq.length > 0) {
                    jq.eq(0).focus();
                }
            } catch (e) {

            }
            try {
                const jq = $(selected);
                if (jq.length > 0) {
                    jq.eq(0).focus();
                }
            } catch (e) {

            }
        });
    });
})();

三、Demo

JQuery扩展label[for]