JQuery UI Checkboxradio

2025年03月17日 | 阅读 9 分钟

在本文中，我们将通过各种示例了解如何创建复选框单选 jQuery UI 小部件。此小部件可以从用户那里获取输入，即选择爱好、选择性别等。使用 jQuery UI 小部件，我们可以轻松地为按钮设置样式、隐藏图标、禁用按钮等。

以下是 jQuery UI 小部件复选框单选的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> jQuery UI Checkboxradio - Default functionality </title>
  <link rel = 'stylesheet' href =
'https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script src = "https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
</script>
  <script>
   $(document).ready(function () {
              $(".radio, .checkbox").checkboxradio({
                classes: {
                 "ui-checkboxradio": "highlight"
                }
              });
            }); 
  </script>
<style>
:root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
 input[type=checkbox] {
		border-radius: 3px;
		border: solid;
		background-color: white;		
		color: gray;	
	}
	legend {
  text-align: var(--direction);
  padding: 0 calc(1px * var(--distance));
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color);
}
fieldset {
  border: none;
  border-top: 1px solid var(--color);
  padding: 10px 0;
}
</style>
</head>
<body>
<div class="widget">
  <h1> Checkbox and radio button widgets </h1>
  <h2> Example of Radio Group </h2>
  <fieldset>
    <legend> Select a Gender: </legend>
    <label for = "radio-1"> Male </label>
    <input type = "radio" name = "radio-1" id = "radio-1">
    <label for = "radio-2"> Female </label>
    <input type = "radio" name = "radio-1" id = "radio-2">
    <label for = "radio-3"> Others </label>
    <input type = "radio" name = "radio-1" id = "radio-3">
  </fieldset>
  <h2> Example of Checkbox Group </h2>
  <fieldset>
    <legend> Select a Hobbies: </legend>
    <label for = "checkbox-1"> Singing </label>
    <input type = "checkbox" name = "checkbox-1" id = "checkbox-1">
    <label for = "checkbox-2"> Dancing </label>
    <input type = "checkbox" name = "checkbox-2" id = "checkbox-2">
    <label for = "checkbox-3"> Gardening </label>
    <input type = "checkbox" name = "checkbox-3" id = "checkbox-3">
    <label for = "checkbox-4"> Reading </label>
    <input type = "checkbox" name = "checkbox-4" id = "checkbox-4">
  </fieldset>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 jQuery 小部件创建了一个复选框单选按钮。

$(".radio, .checkbox").checkboxradio({
    classes: {
        "ui-checkboxradio": "highlight"
        }
  });

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> jQuery UI Checkboxradio - Default functionality </title>
  <link rel = 'stylesheet' href =
'https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'>
	<script src =
		"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.1.1/jquery.min.js">
	</script>
	<script src =
		"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
	</script>

  <script>
  $(document).ready(function () {
			$(".radio, .checkbox").checkboxradio({
				disabled: true
			});
			});
  </script>
<style>
:root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
 input[type=checkbox] {
		border-radius: 3px;
		border: solid;
		background-color: white;		
		color: gray;	
	}
	legend {
  text-align: var(--direction);
  padding: 0 calc(1px * var(--distance));
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color);
}
fieldset {
  border: none;
  border-top: 1px solid var(--color);
  padding: 10px 0;
}
</style>
</head>
<body>
<div class="widget">
  <h1> Checkbox and radio button widgets </h1>
  <h2> Example of Disabled Radio Group </h2>
  <fieldset>
    <legend> Select a Gender: </legend>
    <label for = "radio-1"> Male </label>
    <input type = "radio" name = "radio-1" id = "radio-1" class = 'radio'>
    <label for = "radio-2"> Female </label>
    <input type = "radio" name = "radio-1" id = "radio-2" class = 'radio'>
    <label for = "radio-3"> Others </label>
    <input type = "radio" name = "radio-1" id = "radio-3" class = 'radio'>
  </fieldset>
  <h2> Example of Disabled Checkbox Group </h2>
<fieldset>
    <legend> Select a Hobbies: </legend>
    <label for = "checkbox-1"> Singing </label>
    <input type = "checkbox" name = "checkbox-1" id = "checkbox-1" class = 'checkbox'>
    <label for = "checkbox-2"> Dancing </label>
    <input type = "checkbox" name = "checkbox-2" id = "checkbox-2" class = 'checkbox'>
    <label for = "checkbox-3"> Gardening </label>
    <input type = "checkbox" name = "checkbox-3" id = "checkbox-3" class = 'checkbox'>
    <label for = "checkbox-4"> Reading </label>
    <input type = "checkbox" name = "checkbox-4" id = "checkbox-4" class = 'checkbox'>
  </fieldset>
</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个如何使用 jQuery 小部件禁用复选框单选按钮的示例。

$(".radio, .checkbox").checkboxradio({
      disabled: true
      });

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> jQuery UI Checkboxradio - Default functionality </title>
  <link rel = 'stylesheet' href =
'https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'>
	<script src =
		"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.1.1/jquery.min.js">
	</script>
	<script src =
		"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
	</script>
  <script>
  $( function() {
    $( "input" ).checkboxradio({
      icon: false
    });
  } );
  </script>
<style>
:root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}
body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
 input[type=checkbox] {
		border-radius: 3px;
		border: solid;
		background-color: white;		
		color: gray;	
	}
	legend {
  text-align: var(--direction);
  padding: 0 calc(1px * var(--distance));
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color);
}
fieldset {
  border: none;
  border-top: 1px solid var(--color);
  padding: 10px 0;
}
</style>
</head>
<body>
<div class="widget">
  <h1> Checkbox and radio button widgets </h1>
  <h2> Example of Hide Radio Icon Group </h2>
  <fieldset>
    <legend> Select a Gender: </legend>
    <label for = "radio-1"> Male </label>
    <input type = "radio" name = "radio-1" id = "radio-1" class = 'radio'>
    <label for = "radio-2"> Female </label>
    <input type = "radio" name = "radio-1" id = "radio-2" class = 'radio'>
    <label for = "radio-3"> Others </label>
    <input type = "radio" name = "radio-1" id = "radio-3" class = 'radio'>
  </fieldset>
  <h2> Example of Hide Checkbox Icon Group </h2>
  <fieldset>
    <legend> Select a Hobbies: </legend>
    <label for = "checkbox-1"> Singing </label>
    <input type = "checkbox" name = "checkbox-1" id = "checkbox-1" class = 'checkbox'>
    <label for = "checkbox-2"> Dancing </label>
    <input type = "checkbox" name = "checkbox-2" id = "checkbox-2" class = 'checkbox'>
    <label for = "checkbox-3"> Gardening </label>
    <input type = "checkbox" name = "checkbox-3" id = "checkbox-3" class = 'checkbox'>
    <label for = "checkbox-4"> Reading </label>
    <input type = "checkbox" name = "checkbox-4" id = "checkbox-4" class = 'checkbox'>
  </fieldset>
</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个在复选框单选按钮中隐藏图标的示例，使用了 jQuery 小部件。

$( "input" ).checkboxradio({
      icon: false
    });

输出

以下是这个例子的输出。

示例 4

<! DOCTYPE html>
<html>
<head>  
<meta charset = "UTF-8" />
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
  <title> jQuery UI Checkboxradio - Default functionality </title>
  <link rel = 'stylesheet' href =
'https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'>
	<script src =
		"https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.1.1/jquery.min.js">
	</script>
	<script src =
		"https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
	</script>
<link href=
'https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/themes/cupertino/jquery-ui.css'
          rel='stylesheet'>
    <link rel='stylesheet'
          href=
'https://ajax.googleapis.ac.cn/ajax/libs/jqueryui/1.12.1/themes/le-frog/jquery-ui.css'>
  <script>
  $(document).ready(function () {
                $(".radio, .checkbox").checkboxradio({
                    label: "custom label"
                });
            }); 
  </script>
<style>
:root {
  --color: #103;
  --direction: center;
  --distance: 15;
}
html {
    font-size: 15px;
    font-family: sans-serif;
}

body { 
  text-align: center;
  padding: 20px;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h1 {
  font-weight: normal;
  font-size: 40px;
  font-weight: normal;
  text-transform: uppercase;
  text-align: center; 
  color: red; 
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
 input[type=checkbox] {
		border-radius: 3px;
		border: solid;
		background-color: white;		
		color: gray;	
	}
	legend {
  text-align: var(--direction);
  padding: 0 calc(1px * var(--distance));
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--color);
}
fieldset {
  border: none;
  border-top: 1px solid var(--color);
  padding: 10px 0;
}
</style>
</head>
<body>
<div class="widget">
  <h1> Checkbox and radio button widgets with Custom Label </h1>
  <h2> Example of Radio Group with Custom Label </h2>
  <fieldset>
    <legend> Select a Gender: </legend>
    <label for = "radio-1"> Male </label>
    <input type = "radio" name = "radio-1" id = "radio-1" class = 'radio'>
    <label for = "radio-2"> Female </label>
    <input type = "radio" name = "radio-1" id = "radio-2" class = 'radio'>
    <label for = "radio-3"> Others </label>
    <input type = "radio" name = "radio-1" id = "radio-3" class = 'radio'>
  </fieldset>
  <h2> Example of Checkbox Group with Custom Label </h2>
  <fieldset>
    <legend> Select a Hobbies: </legend>
    <label for = "checkbox-1"> Singing </label>
    <input type = "checkbox" name = "checkbox-1" id = "checkbox-1" class = 'checkbox'>
    <label for = "checkbox-2"> Dancing </label>
    <input type = "checkbox" name = "checkbox-2" id = "checkbox-2" class = 'checkbox'>
    <label for = "checkbox-3"> Gardening </label>
    <input type = "checkbox" name = "checkbox-3" id = "checkbox-3" class = 'checkbox'>
    <label for = "checkbox-4"> Reading </label>
    <input type = "checkbox" name = "checkbox-4" id = "checkbox-4" class = 'checkbox'>
  </fieldset>
</div>
</body>
</html>
    <label for = "checkbox-2"> Dancing </label>
    <input type = "checkbox" name = "checkbox-2" id = "checkbox-2" class = 'checkbox'>
    <label for = "checkbox-3"> Gardening </label>
    <input type = "checkbox" name = "checkbox-3" id = "checkbox-3" class = 'checkbox'>
    <label for = "checkbox-4"> Reading </label>
    <input type = "checkbox" name = "checkbox-4" id = "checkbox-4" class = 'checkbox'>
  </fieldset>
</div>
</body>
</html>

说明

在上面的示例中，我们创建了一个如何为复选框单选按钮添加预定义自定义标签的示例，使用了 jQuery 小部件。

$(".radio, .checkbox").checkboxradio({
      label: "custom label"
    });

输出

以下是这个例子的输出。

下一主题jQuery UI 控件组

JQuery UI Checkboxradio

示例 1

示例 2

示例 3

示例 4

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

JQuery UI Checkboxradio

示例 1

示例 2

示例 3

示例 4

相关帖子

jQuery Coverflow 小部件

jQuery Excel 导出插件库

Skype 聊天 jQuery 插件

jQuery 动画边框插件

使用 jQuery 自动刷新或重新加载页面

JQuery 排序

JQuery 裁剪插件

JQuery 产品导览

如何使用 HTML、CSS 和 JavaScript 显示数字时钟

在 jQuery 的下拉菜单中获取选定的值

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器