选中带有包含链接的标签的单选按钮

Question

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

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

您可以在下面进行测试：

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

<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>

Answer 1

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

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

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

<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>

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>