CheckBox(复选框)控件用来标识某个选项是否为选定的状态。因此通常用此控件提供“Yes/No”或“True/False”选项。可用分组的CheckBox控件显示多组不同类型的选项，用户可从中一个组选择一个或多个选项。CheckBox控件在工具箱中的图标如图所示：
CheckBox控件与RadioBox(单选框)控件都可以用来指示用户是否对某个选项作出选择。不同之处在于，对于一个组内RadioBox控件，一次只能选择其中的一个，而对于所有的CheckBox控件，则可选定任意数目的复选框。RadioBox控件将在后面进一步介绍。
1.CheckState属性
CheckBox控件的CheckState属性指示复选框处于选定、未选定或禁止状态（暗淡的）中的哪一种。选定时，CheckState设置值为1。
下表为用于设置CheckState属性的数值和相应的Visual Basic常数： 
设置值
            
值
            
常数
        
UnChecked
            
0
            
CheckState.UnChecked
        
Checked
            
1
            
CheckState.Checked
        
Indeterminate
            
2
            
CheckState.Indeterminate
        
用户单击CheckBox控件指定选定或未选定状态，然后可检测控件状态并根据此信息编写应用程序以执行某些操作。缺省时，CheckBox控件设置为CheckState.Unchecked。若要预先在一列复选框中选定若干复选框，则应在New或InitializeComponent过程中将CheckState属性设置为CheckState.Checked以选中复选框；可将CheckState属性设置为CheckState.Indeterminate以禁用复选框。例如，有时可能希望满足某条件之前禁用复选框。
2.Click事件
无论何时单击CheckBox控件都将触发Click事件，然后编写应用程序，根据复选框的状态执行某些操作。在下例中，每次单击CheckBox控件时都将改变其Text属性以指示选定或未选定状态：
Protected Sub CheckBox1_Click(ByVal sender As Object,ByVal As_
                       System.EventArgs)Handles CheckBox.Click
    If CheckBox1.CheckState=CheckState.Checked Then
       CheckBox1.Text="Checked"
    ElseIf CheckBox1.CheckState=CheckState.UnChecked Then
       CheckBox1.Text="UnChecked"
    End If
注意：如果试图双击CheckBox控件，则将双击当作两次单击，而且分别处理两次单击，即：CheckBox控件不支持双击事件。
3.响应鼠标和键盘
在键盘上使用Tab键并按SpaceBar键，由此将焦点转移到CheckBox控件上，这时也会触发CheckBox控件的Click事件。可以在Text属性的一个字母之前添加连字符，创建一个键盘快捷方式来切换CheckBox控件的选择。
4.增强CheckBox控件的视觉效果
CheckBox控件象Button和RadioButton控件一样，可通过更改Style属性的设置值后使用Image、ImageAlign、ImageIndex和ImageList属性增强其视觉效果。例如：有时可能希望在复选框中添加图标或位图，或者在单击或禁止控件时显示不同的图象等。
 

vue .js绑定checkbox并获取、改变选中状态

1.html

<div class="weui-cells weui-cells_checkbox font14" v-for="item in items">
            <label class="weui-cell weui-check__label">
                <div class="weui-cell__ft width-inherit">
                    <input type="checkbox" class="weui-check" v-on:click="CheckItem(item)" v-model="item.state" name="checkbox" />
                </div>
            </label>
        </div>

2.js

var vum = new Vue({
    data:{
        items:[{state:false}]
    },
    methods:{
        CheckItem:function(item){
            item.state = !item.state;
            console.log(this.items);
        }
    }
})

 

 

 

jquery获取复选框checkbox的值

实现方式：jquery获取复选框checkbox的值

checkbox选中与取消选择

1.html

<form>
    <input type="checkbox" name="items" value="足球" />足球
    <input type="checkbox" name="items" value="篮球" />篮球
    <input type="checkbox" name="items" value="羽毛球" />羽毛球
</form>

2.js

//全选中
$("input[type=checkbox]").prop("checked","checked");
//取消选中
$("input[type=checkbox]").removeAttr("checked");

注意：使用attr(),会发现代码那里的checked="checked",但是页面input上没有显示出来