javascript - 如果输入集中，如何检查单选按钮

Question

我想要完成的是当我聚焦input元素时，它会自动检查单选按钮。这两个按钮做得很好，但是当我试图专注于输入字段时，根本没有选中单选按钮。我该如何解决这个问题？

这是我的代码：

.rdo + label.lbl-rdo.noah-forms-lbl.nf-opt-lbl:before {
    top: 28px;
}
.rdo + .lbl-rdo:hover:before, .nk .col .chk + .lbl-chk:hover:before {
    border-color: #2575c4;
}
.rdo:checked + .lbl-rdo:before, .nk .col .chk:checked + .lbl-chk:before {
    border-color: #2575c4;
}
.rdo + .lbl-rdo:before, .nk .col .chk + .lbl-chk:before {
    width: 16px;
    height: 16px;
    left: 7px;
    top: 6px;
    border: 2px solid #7a8a9a;
    background-color: transparent;
}
.rdo + .lbl-rdo:before, .nk .col .rdo + .lbl-rdo:after {
    border-radius: 50%;
}
.rdo + .lbl-rdo:before, .rdo + .lbl-rdo:after, .chk + .lbl-chk:before, .chk + .lbl-chk:after {
    content: '';
    position: absolute;
    -webkit-transition: .14s ease transform;
    -moz-transition: .14s ease transform;
    transition: .14s ease transform;
}


.rdo:checked + .lbl-rdo.noah-forms-lbl.nf-opt-lbl:after {
    background-color: #2575c4;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}
.rdo + .lbl-rdo.noah-forms-lbl.nf-opt-lbl:after {
    width: 8px;
    height: 8px;
    left: 13px;
    top: 34px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}
.rdo:checked + .lbl-rdo:after {
    background-color: #2575c4;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}
.rdo + .lbl-rdo:after {
    width: 8px;
    height: 8px;
    left: 11px;
    top: 10px;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    transform: scale(0);
}
.rdo + .lbl-rdo:before, .rdo + .lbl-rdo:after {
    border-radius: 50%;
}
.rdo + .lbl-rdo:before, .rdo + .lbl-rdo:after, .chk + .lbl-chk:before, .chk + .lbl-chk:after {
    content: '';
    position: absolute;
    -webkit-transition: .14s ease transform;
    -moz-transition: .14s ease transform;
    transition: .14s ease transform;
}

.nf-input-opt {
    padding-left: 29px;
}

.nf-aImage-c, .nf-close-c {
  display: inline-block;
  width: 30px;
  height: 30px;
  background: black
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rdo-wrapper fullwidth">
                    <input id="rdo21" type="radio" name="sample4" class="rdo">
                    <label class="lbl-rdo fullwidth noah-forms-lbl nf-opt-lbl" for="rdo21">
                        <div class="col col-12">
                            <div class="nf-opt-c">
                                <div class="nf-input-opt">
                                    <input type="text" name="" class="txtbox" value="Option 1">
                                </div>
                                <div class="nf-aImage-c">
                                    <div class="nf-opt-icon _nf-aImage-opt"></div>
                                </div>
                                <div class="nf-close-c">
                                    <div class="nf-opt-icon _nf-close-opt"></div>
                                </div>
                            </div>
                        </div>
                    </label>
                </div>

提前致谢

标签： javascripthtmljquerycss

Answer 1

你可以尝试使用这样的东西：

$("label.lbl-rdo input").focus(function() {
  $(this).closest("label.lbl-rdo").trigger("click")
})

演示

$("label.lbl-rdo input").focus(function() {
  $(this).closest("label.lbl-rdo").trigger("click")
})

.rdo+label.lbl-rdo.noah-forms-lbl.nf-opt-lbl:before {
  top: 28px;
}

.rdo+.lbl-rdo:hover:before,
.nk .col .chk+.lbl-chk:hover:before {
  border-color: #2575c4;
}

.rdo:checked+.lbl-rdo:before,
.nk .col .chk:checked+.lbl-chk:before {
  border-color: #2575c4;
}

.rdo+.lbl-rdo:before,
.nk .col .chk+.lbl-chk:before {
  width: 16px;
  height: 16px;
  left: 7px;
  top: 6px;
  border: 2px solid #7a8a9a;
  background-color: transparent;
}

.rdo+.lbl-rdo:before,
.nk .col .rdo+.lbl-rdo:after {
  border-radius: 50%;
}

.rdo+.lbl-rdo:before,
.rdo+.lbl-rdo:after,
.chk+.lbl-chk:before,
.chk+.lbl-chk:after {
  content: '';
  position: absolute;
  -webkit-transition: .14s ease transform;
  -moz-transition: .14s ease transform;
  transition: .14s ease transform;
}

.rdo:checked+.lbl-rdo.noah-forms-lbl.nf-opt-lbl:after {
  background-color: #2575c4;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.rdo+.lbl-rdo.noah-forms-lbl.nf-opt-lbl:after {
  width: 8px;
  height: 8px;
  left: 13px;
  top: 34px;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
}

.rdo:checked+.lbl-rdo:after {
  background-color: #2575c4;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
}

.rdo+.lbl-rdo:after {
  width: 8px;
  height: 8px;
  left: 11px;
  top: 10px;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  transform: scale(0);
}

.rdo+.lbl-rdo:before,
.rdo+.lbl-rdo:after {
  border-radius: 50%;
}

.rdo+.lbl-rdo:before,
.rdo+.lbl-rdo:after,
.chk+.lbl-chk:before,
.chk+.lbl-chk:after {
  content: '';
  position: absolute;
  -webkit-transition: .14s ease transform;
  -moz-transition: .14s ease transform;
  transition: .14s ease transform;
}

.nf-input-opt {
  padding-left: 29px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rdo-wrapper fullwidth">
  <input id="rdo21" type="radio" name="sample4" class="rdo">
  <label class="lbl-rdo fullwidth noah-forms-lbl nf-opt-lbl" for="rdo21">
      <div class="col col-12">
          <div class="nf-opt-c">
              <div class="nf-input-opt">
                  <input type="text" name="" class="txtbox" value="Option 1">
              </div>
              <div class="nf-aImage-c">
                  <div class="nf-opt-icon _nf-aImage-opt"></div>
              </div>
              <div class="nf-close-c">
                  <div class="nf-opt-icon _nf-close-opt"></div>
              </div>
          </div>
      </div>
  </label>
</div>