Dados algunos elementos de entrada y la tarea es encontrar todas las entradas que no tienen el nombre = «color» y agrega texto al intervalo al lado usando jQuery. En palabras simples, tenemos que encontrar todas las entradas con el nombre != “color” y luego tenemos que añadir texto al lado del elemento span.
Método utilizado:
- Método next(): este método se utiliza para devolver el siguiente elemento hermano del elemento seleccionado.
- Método append(): este método se utiliza para insertar el contenido especificado al final de los elementos seleccionados.
Acercarse:
- Cree una página HTML con diferentes nombres de entrada y al menos un nombre debe ser en color.
- A continuación, seleccione la entrada que no tiene nombre = «color».
- Escriba un mensaje después de cada elemento de intervalo que no tenga nombre = «color».
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-git.js">
</script>
<style type="text/css">
body {
text-align: center;
font-size: 20px;
}
button {
background-color: #4CAF50;
/* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
</head>
<body>
<h1 style="color:green;">GeeksForGeeks</h1>
<h2>choose colors name from the below list.</h2>
<div>
<input type="checkbox" name="color" value="Red">
<span>Green</span>
</div>
<div>
<input type="checkbox" name="animal" value="good">
<span>Tiger</span>
</div>
<div>
<input type="checkbox" name="birds" value="fly">
<span>Birds</span>
</div>
<br>
<button id="button1">Click to see the effect</button>
<script>
$('#button1').click(function() {
$("input[name!='color']").next()
.append("<b>: This is not a color</b>");
});
</script>
</body>
</html>
Producción –
Antes de hacer clic en el botón –
Después de hacer clic en el botón –
Publicación traducida automáticamente
Artículo escrito por abhishekpal97854368 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA