单击外部输入时选择单选按钮
单击外部输入时选择单选按钮
提问于 2020-12-05 18:08:52
我使用的是一个标准的Bootstrap4手风琴，里面有一个单选按钮。下面是我的代码：
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#tm-stripe-div" aria-expanded="true" aria-controls="tm-stripe-div">
<div class="d-flex justify-content-between">
<div class="stripe-payment-div">
<input class="form-check-input" type="radio" name="paymentRadio" id="stripePayment" value="">
<label class="form-check-label" for="stripePayment"> Credit Card (Stripe) </label>
</div>
</div>
</button>
</h2>
</div>
</div当我在输入字段外单击时，该单选按钮未被选中。我知道最好的方法是使用jquery，但是有没有办法只用css呢？
当use在.card类中的任意位置单击时，我希望选中该单选按钮。谢谢
回答 1
Stack Overflow用户
发布于 2020-12-05 18:43:24
我推荐使用JavaScript，但如果你真的不想这样做，你可以使用许多自定义表单控件使用的技巧。
基本上，将其包装在一个label中，并使用for属性指向您的收音机。
还必须将您的button转换为a，因为点击事件没有注册。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="card">
<label for="stripePayment" class="mb-0">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<a class="btn btn-link btn-block text-left" data-toggle="collapse" data-target="#tm-stripe-div" aria-expanded="true" aria-controls="tm-stripe-div">
<div class="d-flex justify-content-between">
<div class="stripe-payment-div">
<input class="form-check-input" type="radio" name="paymentRadio" id="stripePayment" value="">
<span class="form-check-label" for="stripePayment"> Credit Card (Stripe) </span>
</div>
</div>
</a>
</h2>
</div>
</label>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65155828
复制相关文章
相似问题
腾讯云开发者
