为了通过选择 jQuery 中的特定复选框来显示特定元素的数据/内容,我们可以使用toggle() 方法。
toggle() 方法用于检查被选元素的可见性,以便在被选元素的 hide() 和 show() 之间切换。
句法:
$(selector).toggle(speed, easing, callback)
方法:
- 复选框的选择器名称与用于显示复选框的元素相同
内容。 - 使用 display: none;将每个元素的 CSS display 属性设置为 none;用于最初隐藏元素。
- 使用.toggle() 方法显示和隐藏用于选中和取消选中框的元素。
示例 1:使用复选框显示内容。
Show and Hide div elements using checkbox
GeeksforGeeks
Show and Hide div elements using checkbox
C
is a procedural programming language
C++
is a general purpose programming language
Python
is a widely used general-purpose, high level
programming language.
Java
is a most popular programming language
for many years.
输出:
- 在选择任何复选框之前:
- 选中一个复选框后:
- 选中这两个复选框后:
示例 2:使用复选框隐藏内容
Show and Hide div elements using checkbox
GeeksforGeeks
Show and Hide div elements using checkbox
C
is a procedural programming language
C++
is a general purpose programming language
Python
is a widely used general-purpose, high level
programming language.
Java
is a most popular programming language for
many years.
输出:
- 在选择任何复选框之前:
- 选中一个复选框后:
- 选中这两个复选框后:
示例 3:与警报方法一起
Show and Hide div elements using checkbox
GeeksforGeeks
Show and Hide div elements using checkbox
C
is a procedural programming language
C++
is a general purpose programming language
Python
is a widely used general-purpose, high level
programming language.
Java
is a most popular programming language for
many years.
输出:
- 在选择任何复选框之前:
- 选中复选框后:
- 单击警报确定按钮后:
jQuery 是一个开源 JavaScript 库,它简化了 HTML/CSS 文档之间的交互,它以其“少写,多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。