Jquery的combobox赋值,动态加载等一系列操作
jquery对复选框(checkbox)的操作汇总
jquery操作复选框(checkbox)的12个小技巧。
1、获取单个checkbox选中项(三种写法)
1
|
$( "input:checkbox:checked" ).val() |
或者
1
|
$( "input:[type='checkbox']:checked" ).val(); |
或者
1
|
$( "input:[name='ck']:checked" ).val(); |
2、 获取多个checkbox选中项
1
2
3
4
5
|
$( 'input:checkbox' ).each( function () { if ($( this ).attr( 'checked' ) == true ) { alert($( this ).val()); } }); |
3、设置第一个checkbox 为选中值
1
|
$( 'input:checkbox:first' ).attr( "checked" , 'checked' ); |
或者
1
|
$( 'input:checkbox' ).eq(0).attr( "checked" , 'true' ); |
4、设置最后一个checkbox为选中值
1
|
$( 'input:radio:last' ).attr( 'checked' , 'checked' ); |
或者
1
|
$( 'input:radio:last' ).attr( 'checked' , 'true' ); |
5、根据索引值设置任意一个checkbox为选中值
1
|
$( 'input:checkbox).eq(索引值).attr(' checked ', ' true '); |
索引值=0,1,2....
或者
1
|
$( 'input:radio' ).slice(1,2).attr( 'checked' , 'true' ); |
6、选中多个checkbox同时选中第1个和第2个的checkbox
1
|
$( 'input:radio' ).slice(0,2).attr( 'checked' , 'true' ); |
7、根据Value值设置checkbox为选中值
1
|
$( "input:checkbox[value='1']" ).attr( 'checked' , 'true' ); |
8、删除Value=1的checkbox
1
|
$( "input:checkbox[value='1']" ).remove(); |
9、删除第几个checkbox
1
|
$( "input:checkbox" ).eq(索引值).remove(); |
索引值=0,1,2....
如删除第3个checkbox:
1
|
$( "input:checkbox" ).eq(2).remove(); |
10、遍历checkbox
1
2
3
|
$( 'input:checkbox' ).each( function (index, domEle) { //写入代码 }); |
11、全部选中
1
2
3
|
$( 'input:checkbox' ).each( function () { $( this ).attr( 'checked' , true ); }); |
12、全部取消选择
1
2
3
|
$( 'input:checkbox' ).each( function () { $( this ).attr( 'checked' , false ); }); |
JQuery对CheckBox的一些相关操作
一、通过选择器选取CheckBox:
1.给CheckBox设置一个id属性,通过id选择器选取:
1
|
< input type = "checkbox" name = "myBox" id = "chkOne" value = "1" checked = "checked" /> |
JQuery:
1
|
$( "#chkOne" ).click( function (){}); |
2.给CheckBox设置一个class属性,通过类选择器选取:
1
|
< input type = "checkbox" name = "myBox" class = "chkTwo" value = "1" checked = "checked" /> |
JQuery:
1
2
|
$( ".chkTwo" ).click( function (){}); |
3.通过标签选择器和属性选择器来选取:
1
2
|
< input type = "checkbox" name = "someBox" value = "1" checked = "checked" /> < input type = "checkbox" name = "someBox" value = "2" /> |
JQuery:
1
2
|
$( "input[name='someBox']" ).click( function (){}); |
二、对CheckBox的操作:
以这段checkBox代码为例:
1
2
3
4
|
< input type = "checkbox" name = "box" value = "0" checked = "checked" /> < input type = "checkbox" name = "box" value = "1" /> < input type = "checkbox" name = "box" value = "2" /> < input type = "checkbox" name = "box" value = "3" /> |
1.遍历checkbox用each()方法:
1
|
$( "input[name='box']" ).each( function (){}); |
2.设置checkbox被选中用attr();方法:
1
2
|
$( "input[name='box']" ).attr( "checked" , "checked" ); |
在HTML中,如果一个复选框被选中,对应的标记为 checked="checked"。 但如果用jquery alert($("#id").attr("checked")) 则会提示您是"true"而不是"checked",所以判断 if("checked"==$("#id").attr("checked")) 是错误的,应该是 if(true == $("#id").attr("checked"))
3.获取被选中的checkbox的值:
1
2
3
4
|
$( "input[name='box'][checked]" ).each( function (){ if ( true == $( this ).attr( "checked" )) { alert( $( this ).attr( 'value' ) ); } |
或者:
1
2
3
4
|
$( "input[name='box']:checked" ).each( function (){ if ( true == $( this ).attr( "checked" )) { alert( $( this ).attr( 'value' ) ); } |
$("input[name='box']:checked")与 $("input[name='box']")有何区别没试过,我试了用 $("input[name='box']")能成功。
4.获取未选中的checkbox的值:
1
2
3
4
5
|
$( "input[name='box']" ).each( function (){ if ($( this ).attr( 'checked' ) == false ) { alert($( this ).val()); } }); |
5.设置checkbox的value属性的值:
1
|
$( this ).attr( "value" ,值); |
三、 一般都是创建一个js数组来存储遍历checkbox得到的值,创建js数组的方法:
1. var array= new Array();
2. 往数组添加数据:
array.push($(this).val());
3.数组以“,”分隔输出:
alert(array.join(','));
一、Jquery对combobox进行动态加载的方式
二、combobox箭头选择下拉框(showPanel)
属性:显示信息——showPanel
三、combox页面显示和js赋值
html
<form id="myForm" >
<input id="cc" value="001" style="width: 50px;">
<select class="easyui-combobox" name="sex0" id="sex0" data-options="width:100,panelHeight:72,editable:false,required:true,validType:'comboxRequired[\'-- 请选择 --\']'">
<option value="">-- 请选择 --</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<select class="easyui-combobox" name="sex1" id="sex1" data-options="width:100,panelHeight:72,editable:false,required:true">
<option value="男">男</option>
<option value="女">女</option>
</select>
<button type="button" id="formresetButton">reset<button>
<button type="button" id="formSubmitButton">submit<button>
</form>
js
//添加一个验证类型
$.extend($.fn.validatebox.defaults.rules, {
comboxRequired: {
validator: function(value, param){
return value!= param[0];
},
message: '必须选择一个'
}
});
$('#formresetButton').on("click",function(){
$('#myForm').form("reset");
});
$('#formSubmitButton').on("click",function(){
$('#myForm').form("submit",{
onSubmit: function(){
var isValid = $(this).form('validate');
//如果验证失败,返回false,form不提交
console.log(isValid);
return isValid;
}
});
});
$('#Id号').combobox('enable'); //可用 $('#Id号').combobox('disable'); //不可用