3
votes

Combiner une balise et une

Je ne peux pas combiner une balise et une balise en HTML. J'essaie d'avoir un texte qui, lorsque vous cliquez dessus, coche une case et vous mène quelque part sur la page, j'ai essayé de le faire comme ça:

<label for"somecheckbox"><a href"#somewhere">Some Text</a></label>

Mais seulement le libellé a fonctionné, puis je l'ai essayé comme ça:

<a href"#somewhere"><label for"somecheckbox">Some Text</label></a>

Mais alors seul le lien fonctionne, y a-t-il un moyen de pouvoir utiliser les deux?

html

1 commentaires

Cochez simplement la case avec libellé et utilisez javascript pour faire tout ce que vous devez faire. Mais si votre case à cocher dirige l'utilisateur vers une section de la page, vous ne devriez probablement pas utiliser de case à cocher

4 Réponses :

2
votes

Le problème est que vous essayez d'imbriquer interactif contenu . C'est quelque chose que vous ne pouvez pas faire via les spécifications du W3C. Voir le un tag , par exemple avec son autorisation

Vous devrez utiliser javascript pour réaliser ce que vous voulez faire.

Voici un exemple rapide:

<div class="head">
<a href="#aTarget" data-for="aCheckBox">Click Me</a> <input type="checkbox" id="aCheckBox" />
</div>
<div id="aTarget">A Target</div>

.head {margin-bottom: 100vh;}

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;
  });
}

0 commentaires

-1
votes

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

Cette solution est ce que tout le monde suggère d'utiliser JavaScript, votre problème peut être résolu facilement. Dès que vous cliquez sur la troisième case à cocher, il vous redirige vers une nouvelle page Web

0 commentaires

1
votes

Il n'est pas possible de faire à la fois la navigation et l'activation de la case à cocher à l'aide de balises, veuillez utiliser javascript pour vous concentrer sur la cible lorsque la case est cochée.

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();
  }
})

0 commentaires

0
votes

Lorsque vous cliquez sur l'étiquette, la case à cocher est cochée et elle est dirigée vers un emplacement.

<label for="checkbox">
<input type="checkbox" name="checkbox"/>
Check
</label>

<p id="location"> Some location </p>

#location {
  position: absolute;
  bottom: -100px;
}

const label = document.querySelector('[for=checkbox]');
const checkBox = document.querySelector('[name=checkbox]');
label.addEventListener('click', function (){
  checkBox.setAttribute("checked", "true");
  location.href = "#location";  
});

0 commentaires