检查包含链接的标签的单选按钮

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>