Question

我想通过点击标签检查单选按钮，它可以正常工作。但是当我在我的标签中使用链接标签并点击标签中的链接时，我的单选按钮不会检查。

我没有使用任何jquery代码来解决这个问题，而且它只是一个无法正常工作的HTML代码。

你可以在下面测试一下：

＆＃13;

a{
  display: inline-block;
  width: 100%;
}

＆＃13;

<div class="radio-ctn">
  <label class="btn05 active">
    <input type="radio" name="gender"><span>Male</span>
    <a href="#">sample link that I want to click on it and radio be selected... </a>
  </label>
  <label class="btn05">
    <input type="radio" name="gender"><span>Female</span>
  </label>
</div>

＆＃13;

Answer 1

您可以使用解决方案https://jsfiddle.net/nvce3w4j/

＆＃13;

$('a').click(function(e) {
   $(this).parent().find('input').prop('checked', 'checked');
});

＆＃13;

a {
  display: inline-block;
  width: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio-ctn">
  <label class="btn05 active">
    <input type="radio" name="gender"><span>Male</span>
    <a href="#">sample link that I want to click on it and radio be selected... </a>
  </label>
  <label class="btn05">
    <input type="radio" name="gender"><span>Female</span>
  </label>
</div>

＆＃13;

Answer 2

您可以删除（href =“＃”）属性，例如此代码

   <div class="radio-ctn">
        <label class="btn05 active">
            <input type="radio" name="gender"><span>Male</span>
            <a>Click her to check</a>
        </label>
        <label class="btn05">
            <input type="radio" name="gender"><span>Female</span>
        </label>
    </div>

或使用jQuery事件

$('.check_gender').on('click', function () {
    $(this).parent().click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div class="radio-ctn">
        <label class="btn05 active">
            <input type="radio" name="gender"><span>Male</span>
            <a href="#" class="check_gender">Click her to check</a>
        </label>
        <label class="btn05">
            <input type="radio" name="gender"><span>Female</span>
        </label>
    </div>

选中包含链接

2 个答案: