复选框（CheckBox）在Web开发中常用于多选场景，例如选择拒绝原因或配置项。以下示例展示了如何在Ext JS中弹出窗口，让用户勾选拒绝表单的原因。 示例效果 先看效果图（界面简洁，仅供演示参考）： 弹出窗口核心代码 弹出窗口载体为Ext.Window，核心代码如下： 复制代码 代码如下: va
Extjs 4.x 获取表单复选框的值
作者：技术拾光
时间：2026-06-11
浏览：589
文章目录
复选框（CheckBox）在Web开发中常用于多选场景，例如选择拒绝原因或配置项。以下示例展示了如何在Ext JS中弹出窗口，让用户勾选拒绝表单的原因。
示例效果
先看效果图（界面简洁，仅供演示参考）：
弹出窗口核心代码
弹出窗口载体为Ext.Window，核心代码如下：
复制代码 代码如下:
var win = new Ext.Window({
modal : true,
title : '确定要拒绝该表吗？',
width : 500,
plain : true,
items : [fp]
});
win.show();
表单面板定义
窗口内容由表单面板`fp`构成，完整定义如下：
复制代码 代码如下:
var fp = Ext.create('Ext.FormPanel', {
frame: true,
fieldDefaults: {
labelWidth: 110
},
width: 500,
bodyPadding: 10,
items: [
{
xtype: 'fieldset',
flex: 1,
defaultType: 'checkbox',
layout: 'anchor',
defaults: {
anchor: '100%',
hideEmptyLabel: false
},
items:[{
fieldLabel: '请选择拒绝原因:',
boxLabel: '该表没有填写完整。',
name:'integrity',
inputValue: '1'
}, {
name:'correct',
boxLabel: '该表填写不准确。',
inputValue: '1'
}]
}],
buttons: [
{text: '确认',handler: function(){
if(fp.getForm().isValid()){
console.log(fp.getForm().findField('integrity').getValue()1:0);
console.log(fp.getForm().findField('correct').getValue()1:0)
}
win.hide();
}
},{text: '取消',
handler: function(){
win.hide();
}
}]
});
代码说明
使用`fieldset`包裹两个复选框，通过`defaultType: 'checkbox'`使子项默认为复选框。每个复选框的`name`属性用作提交时的键名，`inputValue`指定勾选后的提交值。
获取复选框值的方法
取值的关键代码：
复制代码 代码如下:
console.log(fp.getForm().findField('integrity').getValue()1:0);
console.log(fp.getForm().findField('correct').getValue()1:0)
先通过`getForm()`获取表单对象，再用`findField()`定位具体字段，最后调用`getValue()`获取复选框状态——勾选返回`true`，未勾选返回`false`。三元运算符将其转换为`1`或`0`，便于业务逻辑判断。如需获取其他复选框的值，参照此方法即可。具体API细节可查阅官方文档，逻辑并不复杂。
实用工具推荐
电子包浆
使用 ›绿化、压缩、噪点和虚拟水印，自由调节做旧程度。
图片压缩
使用 ›选择画质和输出格式，预览压缩前后的大小。
相关文章