将<a>标签和<label>标签结合使用
3
- Eliav Cohen
1
只需使用标签创建复选框，然后使用JavaScript执行其他必要的操作。但是，如果您的复选框将用户引导到页面的某个部分，则可能不应使用复选框。 - Huangism
4个回答
2
问题在于您正在尝试嵌套交互内容，这是通过W3C规范无法实现的。例如，请参见a标签及其允许的内容。
您需要使用JavaScript来实现您想要做的事情。
以下是一个快速示例：
您需要使用JavaScript来实现您想要做的事情。
以下是一个快速示例：
var links = document.querySelectorAll("[data-for]");
//Set Event Handler
for(var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(event){
//Get the target cb from the data attribute
var cbTarget = this.dataset.for;
//Check the cb
document.getElementById(cbTarget).checked = true;
});
}.head {margin-bottom: 100vh;}<div class="head">
<a href="#aTarget" data-for="aCheckBox">Click Me</a> <input type="checkbox" id="aCheckBox" />
</div>
<div id="aTarget">A Target</div>- Jon P
1
无法使用标签同时进行导航和切换复选框，请在选中复选框时使用JavaScript聚焦到目标。
document.getElementById("somecheckbox").addEventListener("change", function(e){
// see if it is checked
if(e.target.checked){
// and focus to specific id
document.getElementById("somewhere").focus();
}
})
- bhansa
0
当您单击标签时，复选框将被选中并跳转到一个位置。
const label = document.querySelector('[for=checkbox]');
const checkBox = document.querySelector('[name=checkbox]');
label.addEventListener('click', function (){
checkBox.setAttribute("checked", "true");
location.href = "#location";
});#location {
position: absolute;
bottom: -100px;
}<label for="checkbox">
<input type="checkbox" name="checkbox"/>
Check
</label>
<p id="location"> Some location </p>- Chiara Ani
-1
<!DOCTYPE html>
<html>
<body>
<script>
function Redirect(){
if (document.getElementById('vehicle3').checked)
{
window.location = "https://www.tutorialspoint.com";
}
}
</script>
<h1>Show checkboxes:</h1>
<input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
<input type="checkbox" name="vehicle3" id='vehicle3' value="Boat" onClick='Redirect();'> I have a boat<br><br>
<input type="submit" value="Submit">
</body>
</html>这个解决方案是每个人都建议使用JavaScript，你的问题可以很容易地解决。一旦你点击第三个复选框，它会将你重定向到一个新的网页。
- Ishaan Kanwar
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接