js多选

『壹』 Extjs怎么实现下拉框多选

1、扩展js类库，在项目中建立一个 js文件，命名为:xxx.js 其代码为

if('function'!==typeofRegExp.escape)
{
RegExp.escape=function(s)
{
if('string'!==typeofs)
{
returns;
}
returns.replace(/([.*+?^=!:${}()|[]/\])/g,'\$1');
};
}

Ext.ns('Ext.form');

Ext.form.MultiSelect=Ext.extend(Ext.form.ComboBox,
{
checkField:'checked',
multi:true,
separator:',',
initComponent:function()
{
if(!this.tpl)
{
this.tpl='<tplfor=".">'+'<divclass="x-combo-list-item">'
+'<imgsrc="'+Ext.BLANK_IMAGE_URL+'"'
+'class="ux-MultiSelect-iconux-MultiSelect-icon-'
+'{[values.'+this.checkField+'?"checked":"unchecked"'
+']}">'
+'{[values.'+this.displayField+']}'
+'</div>'
+'</tpl>';
}

Ext.form.MultiSelect.superclass.initComponent.apply(this,arguments);

this.on(
{
scope:this,
beforequery:this.onBeforeQuery,
blur:this.onRealBlur
});

this.onLoad=this.onLoad.createSequence(function()
{
if(this.el)
{
varv=this.el.dom.value;
this.el.dom.value='';
this.el.dom.value=v;
}
});
},
initEvents:function()
{
Ext.form.MultiSelect.superclass.initEvents.apply(this,arguments);
this.keyNav.tab=false;
},
beforeBlur:function()
{
},
postBlur:function()
{
},

clearValue:function()
{
this.value='';
this.setRawValue(this.value);
this.store.clearFilter();
this.store.each(function(r)
{
r.set(this.checkField,false);
},this);
if(this.hiddenField)
{
this.hiddenField.value='';
}
this.applyEmptyText();
},
getCheckedDisplay:function()
{
varre=newRegExp(this.separator,"g");
returnthis.getCheckedValue(this.displayField).replace(re,this.separator+'');
},
getCheckedValue:function(field)
{
field=field||this.valueField;
varc=[];
varsnapshot=this.store.snapshot||this.store.data;
snapshot.each(function(r)
{
if(r.get(this.checkField))
{
c.push(r.get(field));
}
},this);

returnc.join(this.separator);
},
onBeforeQuery:function(qe)
{
qe.query=qe.query.replace(newRegExp(RegExp.escape(this.getCheckedDisplay())+'['+this.separator+']*'),'');
},
onRealBlur:function()
{
this.list.hide();
varrv=this.getRawValue();
varrva=rv.split(newRegExp(RegExp.escape(this.separator)+'*'));
varva=[];
varsnapshot=this.store.snapshot||this.store.data;

Ext.each(rva,function(v)
{
snapshot.each(function(r)
{
if(v===r.get(this.displayField))
{
va.push(r.get(this.valueField));
}
},this);
},this);
this.setValue(va.join(this.separator));
this.store.clearFilter();
},
onSelect:function(record,index)
{
if(this.fireEvent('beforeselect',this,record,index)!==false)
{
record.set(this.checkField,!record.get(this.checkField));

if(this.store.isFiltered())
{
this.doQuery(this.allQuery);
}

if(this.multi)
{
if(record.get("key")=="---"&&record.get(this.checkField))
{
this.setValue("---");
}
else
{
this.setValue(this.getCheckedValue());
}
}
else
{
this.clearValue();
this.value=record.get(this.valueField);
this.setRawValue(record.get(this.displayField));
this.list.hide();
}

this.fireEvent('select',this,record,index);
}
},
setValue:function(v)
{
if(v)
{
v=''+v;
if(this.valueField)
{
this.store.clearFilter();
this.store.each(function(r)
{
varchecked=!(!v.match('(^|'+this.separator+')'
+RegExp.escape(r.get(this.valueField))
+'('+this.separator+'|$)'));
r.set(this.checkField,checked);
},this);
this.value=this.getCheckedValue();
this.setRawValue(this.getCheckedDisplay());
if(this.hiddenField)
{
this.hiddenField.value=this.value;
}
}
else
{
this.value=v;
this.setRawValue(v);
if(this.hiddenField)
{
this.hiddenField.value=v;
}
}
if(this.el)
{
this.el.removeClass(this.emptyClass);
}
}
else
{
this.clearValue();
}
},
selectAll:function()
{
this.store.each(function(record)
{
record.set(this.checkField,true);
},this);
this.doQuery(this.allQuery);
this.setValue(this.getCheckedValue());
},
deselectAll:function()
{
this.clearValue();
}
});
Ext.reg('multiSelect',Ext.form.MultiSelect);

2、在ext-all.css文件最后，加入css样式

.ux-MultiSelect-icon{width:16px;height:16px;float:left;background-position:-1px-1px!important;background-repeat:no-repeat!important;}
.ux-MultiSelect-icon-checked{background:transparenturl(../images/default/menu/checked.gif);}
.ux-MultiSelect-icon-unchecked{background:transparenturl(../images/default/menu/unchecked.gif);}

3、使用

varDepartUserStore=newExt.data.Store(
{
proxy:newExt.data.HttpProxy(
{
url:'/Web/Manage/DeskTop/JSON/ScheleManager/GetSimpleDepartUserInfo.aspx'
}),
//读取Json
reader:newExt.data.JsonReader(
{totalProperty:"totalCount",root:"root"},
[
{name:'UserId',type:'int'},
{name:'UserName',type:'string'}
])
});

varDepartUserCbox=newExt.form.MultiSelect(
{
fieldLabel:'姓名',
labelStyle:'width:80px',
width:150,
editable:false,
id:'DepartUserDS',
hiddenName:'DepartUserIdDS',
store:DepartUserStore,
emptyText:'--请选择--',
allowBlank:false,
blankText:'请选择',
mode:'remote',
displayField:'UserName',
valueField:'UserId',
triggerAction:'all',
selectOnFocus:true,
listWidth:200
});

DepartUserStore.on('load',function()
{
DepartUserCbox.selectAll();//全选
});

DepartUserStore.load();

『贰』 js怎么实现能多选的下拉框，点一个选中一个

Hi，你的操作就是当已经选择过的情况下你需要删除掉数组的相应值。
我帮你改写了一下，数组值需要存储选框的下标就可以了的。

<script language="javascript">
var sel = [];
function OnClick() {
var i_ts_desc = document.getElementById("i_ts_desc");
var index = i_ts_desc.selectedIndex;
var iHas = -1;
sel.sort();
for (var i = 0; i < sel.length; i++) {
if (sel[i] == index) {
iHas = i;
} else {
i_ts_desc[sel[i]].selected = true;
}
}
if (iHas == -1) {
sel.push(index);
i_ts_desc[index].selected = true;
} else {
sel.splice(iHas, 1);
i_ts_desc[index].selected = false;
}
}
</script>
<select id="i_ts_desc" multiple="multiple" onclick="OnClick();" >
<option value="A">0</option>
<option value="B">1</option>
<option value="C">2</option>
<option value="D">3</option>
<option value="E">4</option>
<option value="F">5</option>
</select>

『叁』 js代码里 多选框 如何写成选中状态

获取到checkbox元素后，设置其checked属性为true或false来改变其选中状态。

<html>
<head>
<script type="text/javascript">
function check()
{
//根据ID获取checkbox元素专 设置其checked属性属为true 选中

document.getElementById("myCheck").checked=true;
}

function uncheck()
{
//根据ID获取checkbox元素 设置其checked属性为false 取消选中

document.getElementById("myCheck").checked=false
}
</script>
</head>

<body>
<form>
<input type="checkbox" id="myCheck" />
<input type="button" onclick="check()" value="选定复选框" />
<input type="button" onclick="uncheck()" value="取消选定复选框" />
</form>
</body>

</html>

『肆』 js获取多选框被选中的值(js获取选中的单选按钮)

利用name属性值获取checkbox对象，然后循环判断checked属性，true表示被选中，false表示未选中。

首先用document.getElementsByName()这个方法，通过input标签的name属性将input元素获取，并存进obj这个变量值中。然后建一个check_val的数组，通过for循环将input标签的value值存入数组中，这样就可以获取checkbox的选中的多个值。

JS获取多选框checkbox被选中的个数。varcheckbox=document.getElementsByName(likes[])；//此处通过此种方式才能获得多选框为数组。

思路：根据name值获取复选框对象→循环判断复选框的checked属性（true表示选中，false为未选中）→计数。

思路：首先利用name属性值获取checkbox对象，然后循环判断checked属性：如果为true表示被选中，false则表示未选中。

<selectid="test"multiple="true">
	<optionvalue="option-A">option-A</option>
	<optionvalue="option-B">option-B</option>
	<optionvalue="option-C">option-C</option>
	<optionvalue="option-D">option-D</option>
</select>
<inputtype="button"value="确定"onclick="fun()"/>

functionfun(){
	varselect=document.getElementById("test");
	varstr=[];
	for(i=0;i<select.length;i++){
		if(select.options[i].selected){
			str.push(select[i].value);
		}
	}
	alert(str);
}