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;
        }
    });

});

 四、Easy ui 设置下拉combobox 可用与不可用

$('#Id号').combobox('enable');   //可用
   $('#Id号').combobox('disable');   //不可用
posted @ 2017-04-01 10:17  火线速递  阅读(2021)  评论(0)    收藏  举报