Heim > Web-Frontend > js-Tutorial > Wie implementiert man ein Kontrollkästchen mit mehreren Eingaben in einfachem JavaScript?

Wie implementiert man ein Kontrollkästchen mit mehreren Eingaben in einfachem JavaScript?

WBOY
Freigeben: 2023-09-07 20:53:02
nach vorne
993 Leute haben es durchsucht

如何在普通 JavaScript 中实现多输入复选框?

Wir lernen, wie man ein Kontrollkästchen mit mehreren Eingaben implementiert. Der Kontrollkästchen-Eingabeselektor verfügt über die folgende Funktionalität:

  • Mehrere Optionen können über Kontrollkästchen ausgewählt werden.

  • Die ausgewählten Optionen werden als separate Liste angezeigt.

  • Jede ausgewählte Option bietet ein Löschsymbol zum Deaktivieren/Löschen dieser Option.

Außerdem ist zu beachten, dass wir zur Implementierung dieser Funktionen keine Bibliotheken von Drittanbietern verwenden werden, sondern alles nur in HTML + JavaScript + CSS geschrieben wird.

Methode

  • Wir werden ein Objekt haben, dessen Schlüssel als Beschriftung für die Kontrollkästcheneingabe verwendet wird und dessen Wert (wahr/falsch) als überprüftes Attribut verwendet wird.

  • Wir rendern dann jeden Schlüssel des Objekts.

  • Wir werden die Liste jedes Mal neu rendern, wenn sich der Status einer Option ändert.

  • In ähnlicher Weise aktualisieren wir nach dem Klicken auf das Löschsymbol die Optionen und rendern die Liste neu.

Beispiel

Schauen wir uns also denselben Code an -

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

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

Nach dem Login kopieren

Anleitung

  • Der obige Code erstellt eine Webseite, die eine Reihe von Kontrollkästchen anzeigt.

  • Jedes hat ein anderes Farbetikett (rot, grün, gelb usw.).

  • Wenn das Kontrollkästchen aktiviert ist, wird die entsprechende Farbbeschriftung im Div „Halter“ oben auf der Seite angezeigt.

  • Das Etikett zeigt auch ein „x“ an, das beim Klicken das Kontrollkästchen deaktiviert und das Etikett aus dem Div „Halter“ entfernt.

  • Der Code verwendet JavaScript, um das DOM zu manipulieren und die Auswahl und Aufhebung von Kontrollkästchen zu verwalten.

Das obige ist der detaillierte Inhalt vonWie implementiert man ein Kontrollkästchen mit mehreren Eingaben in einfachem JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage