Maison > Article > interface Web > Comment implémenter une case à cocher multi-entrées en JavaScript simple ?
Comment implémenter une case à cocher multi-entrées en JavaScript simple ?
- WBOYavant
- 2023-09-07 20:53:02897parcourir
Nous apprendrons comment implémenter une case à cocher multi-entrées. Le sélecteur d'entrée de case à cocher aura la fonctionnalité suivante -
Plusieurs options peuvent être sélectionnées à l'aide de cases à cocher.
Les options sélectionnées seront affichées dans une liste distincte.
Chaque option sélectionnée fournira une icône de suppression pour décocher/supprimer cette option.
Une autre chose à noter est que nous n'utiliserons aucune bibliothèque tierce pour implémenter ces fonctionnalités, tout sera écrit en HTML + JavaScript + CSS uniquement.
Méthode
Nous aurons un objet dont la clé sera utilisée comme étiquette pour la saisie de la case à cocher et la valeur (vrai/faux) sera utilisée comme attribut coché.
Nous rendrons ensuite chaque clé de l'objet.
Nous restituerons la liste chaque fois que le statut d'une option change.
De même, après avoir cliqué sur l'icône de suppression, nous mettrons à jour les options et restituerons la liste.
Exemple
Regardons donc le même code -
<!DOCTYPE html>
<html>
<head>
<title>Multiple input Checkbox</title>
<style>
#holder {
background: #ddd;
min-height: 35px;
border-radius: 5px;
padding: 5px;
overflow-y: scroll;
display: flex;
align-items: center;
flex-direction: row;
}
#box {
display: flex;
flex-direction: column;
}
.divison {
margin: 15px 0;
}
.item {
margin: 0;
margin-right: 5px;
padding: 0;
}
.itemHolder {
display: flex;
margin-right: 20px;
flex-direction: row;
align-items: center;
padding: 5px 10px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id='holder'></div>
<div id='box'></div>
</body>
<script>
const options = {
'Red': false,
'Green': false,
'Yellow': false,
'Orange': false,
'Blue': false,
'Black': false,
'Cyan': false,
'Magenta': false,
'Pink': false
};
const renderOptions = () => {
const holder = document.getElementById('holder');
holder.innerHTML = '';
for (const key of Object.keys(options)) {
if (options[key]) {
const cancelIcon = document.createElement('span');
cancelIcon.innerText = 'x';
cancelIcon.style.cursor = 'pointer';
cancelIcon.onclick = () => handleClick(key);
const item = document.createElement('div');
const element = document.createElement('p');
element.innerText = key;
element.style.color = key.toLowerCase();
element.classList.add('item');
item.appendChild(element);
item.appendChild(cancelIcon);
item.classList.add('itemHolder');
holder.appendChild(item);
}
}
};
const handleClick = (label) => {
options[label] = !options[label];
renderCheckbox();
renderOptions();
};
const renderCheckbox = () => {
const box = document.getElementById('box');
box.innerHTML = '';
for (const key of Object.keys(options)) {
const divison = document.createElement('div');
const input = document.createElement('input');
const label = document.createElement('label');
divison.classList.add('divison');
input.id = key;
label.innerText = key;
label.for = key;
input.type = 'checkbox';
input.value = key;
input.checked = options[key];
input.onchange = () => handleClick(key);
divison.appendChild(input);
divison.appendChild(label);
box.appendChild(divison);
}
};
renderCheckbox();
</script>
</html>
Instructions
Le code ci-dessus crée une page Web qui affiche un ensemble de cases à cocher.
Chacun a une étiquette de couleur différente (rouge, vert, jaune, etc.).
Lorsque la case est cochée, l'étiquette de couleur correspondante sera affichée dans le div "holder" en haut de la page.
L'étiquette affiche également un "x" qui, lorsque vous cliquez dessus, désélectionne la case à cocher et supprime l'étiquette du div "holder".
Le code utilise JavaScript pour manipuler le DOM et gérer la sélection et la désélection des cases à cocher.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!