jQuery UI |复选框收音机小部件

checkboxradio 小部件可用于获取用户的输入。传统的复选框单选按钮与 jQuery UI 中的按钮之间的主要区别在于它可以轻松地对按钮进行样式化。此小部件允许通过将关联标签定位在隐藏输入的顶部并使用（可选）图标模拟复选框或单选元素本身来解决该限制。

句法：

$( "$selector" ).checkboxradio({
});

属性：

• destroy：用于移除 jQuery UI 的 checkboxradio 功能并将其更改为标准复选框，没有任何样式。
• disable：禁用复选框单选按钮。
• 启用：如果之前已禁用复选框单选按钮，则启用该按钮。
• 实例：如果没有选择对象，则返回复选框的最后一个实例对象，则返回undefined 。
• refresh：用于刷新小部件的外观，在更改和应用不同主题后很有用。
• 小部件：将完整的 checkboxradio 作为 jQuery 小部件对象返回。

示例 1：让我们创建一个带有基本主题的简单复选框收音机，这是它的代码。

  

    
  
    
  
    
  

  

    
        GeeksforGeeks
        
        Radio Button
        Tennis
        
        
        Badminton
        
        
        Squash
        
        
        
        
  
        Checkbox
        Cricket
        
        
        Football
        
  
        
            $(document).ready(function() {
  
                $(".r2, .c2").checkboxradio({});
  
            });
        
  

  

输出：

应用主题：可以通过更改 CSS 文件来更改主题。在这里，jQuery UI 中使用了一些预定义的 CSS 文件。在 head 标签内调用的 CSS 文件中的更改。

示例 2：

  

    
    
    
  
    
  

  

    
        GeeksforGeeks
        Radio Button
        Tennis
        
        
        Badminton
        
        
        Squash
        
        
        Checkbox
        Cricket
        
        
        Football
        
  
        
            $(document).ready(function() {
                $(".r2, .c2").checkboxradio({});
  
            });
        
    

  

注意：在上面的例子中， r2和c2是 div 标签的 id。要将其应用于类，请在类名前添加“$”。

示例： “$my_class”
这里我们使用了主题“le-frog” 。正如在这一行中指定的那样。

输出：