jquery checkbox（jquery如何取得页面有多少选中的checkbox）

本文目录

• jquery如何取得页面有多少选中的checkbox
• jquery 实现checkbox选中颜色改变
• jquery获取div中checkbox 选中的个数
• jquery 怎么选中checkbox指定的值
• jquery checkbox怎么选中和不选中
• jquery 设置 checkbox选择行的input 为不可以编辑状态
• jquery中怎么选中所有的checkbox的值
• jquery 获取一组 checkbox 没被选中的值
• jquery如何获取checkbox，并判断是否选中
• 如何用jQuery实现checkbox全选

jquery如何取得页面有多少选中的checkbox

通过jquery过滤器:checked方式获取所有选中的checkbox

1、定义页面checkbox框,代码如下：

《body》

《input type=’checkbox’/》

《input type=’checkbox’/》

《input type=’checkbox’/》

《/body》

2、通过jquery过滤器选择选中的checkbox，代码如下：

var chks=$("input:checked");//获取所有选中的checkbox,chks是一个元素数组

3、通过chks的长度知道多少被选中，代码如下：

var len = chks.length;//选中的checkbox数量

扩展资料

jQuery语言的特点：

1、快速获取文档元素

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

2、提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

3、创建AJAX无刷新网页

AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

4、提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

5、增强的事件处理

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

6、更改网页内容

jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

jquery 实现checkbox选中颜色改变

1、首先用hbuilder器新建一个html文件，里面设置一个input框并设置它的tpye属性为checkbox，设置name属性为checkbox，同时在上方设置一个bgred的样式备用：

2、然后在下方引入Jquery库，首先获取checkbox的dom元素，给它一个点击事件，然后判断checkbox有没有被选中，如果选中就添加上一步设置好的css样式，否则则删除样式：

3、最后来到浏览器，可以看到一个checkbox框，点击将它选中：

4、点击之后checkbox的颜色就改变了：

jquery获取div中checkbox 选中的个数

1．HTML结构

《 input type = "checkbox" name = "test" value = "1" / 》 《 span 》 1 《 / span 》

《 input type = "checkbox" name = "test" value = "2" / 》 《 span 》 2 《 / span 》

《 input type = "checkbox" name = "test" value = "3" / 》 《 span 》 3 《 / span 》

《 input type = "checkbox" name = "test" value = "4" / 》 《 span 》 4 《 / span 》

《 input type = "checkbox" name = "test" value = "5" / 》 《 span 》 5 《 / span 》

2．Javascript代码：

函数show（）｛

Obj文件。getElementsByName（“测试”）；

Check＿val＝［］；

For（kinobj）｛

如果（obj［k］。检查）

Check＿val。Push（obj［k］。值）；

｝

警报（check＿val）；

｝

扩展资料：

JQuery对复选框的各种操作：

1．根据id获取复选框：

＄（＂＃cbCheckbox1＂）；

2．得到所有的复选框：

＄（＂input［type＝＇checkbox＇］＂）；／／或

＄（＂input［name＝＇cb＇］＂）；

3．获得所有选中的复选框：

＄（＂input：thecheckboxchecked＂）；／／或

＄（＂input：［type＝＇checkbox＇］：checked＂）；／／或

＄（＂input［type＝＇checkbox］：checked＂）；／／或

＄（＂input：［name＝＇ck＇］：checked＂）；

jquery 怎么选中checkbox指定的值

1、checkbox日常jquery操作。
现在我们以下面的html为例进行checkbox的操作。
《input id="checkAll" type="checkbox" /》全选
《input name="subBox" type="checkbox" /》项1
《input name="subBox" type="checkbox" /》项2
《input name="subBox" type="checkbox" /》项3
《input name="subBox" type="checkbox" /》项4

CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭。大多数应用程序的"设置"对话框内均有此控件。我们看到的可以打勾的就是CheckBox。

该控件表明一个特定的状态(即选项)是选定 (on，值为true) 还是清除 (off，值为false)。在应用程序中使用该控件为用户提供"True/False"或"yes/no"的选择。进行选项组合。

jquery checkbox怎么选中和不选中

《!--默认选中--》

《input type="checkbox" checked="checked" id="ck"》

《script》

$(function () {

// 动态绑定默认状态

//  $("#ck").attr("checked",true)//选中

// $("#ck").attr("checked",false)//未选中

//点击判断选中还是未选中

$("#ck").click(function () {

if ($(this).is(":checked")) {

alert("选中");

} else {

alert("未选中");

}

})

});

《/script》

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。

2010年1月，也是jQuery的四周年生日，jQuery 1.4版发布，为了庆祝jQuery四周岁生日，jQuery团队特别创建了jquery14.com站点，带来了连续14天的新版本专题介绍。

在1.3及更早版本中，jQuery通过JavaScript的eval方法来解析json对象。在1.4中，如果你用的浏览器支持，则会使用原生的JSON.parse解析json对象，这样对json对象的书写验证则更为严格。比如：{foo: "bar"}的写法将不会被验证为合法的json对象，必须写成{"foo":"bar"}。如果你的程序打算升级到1.4版本，那么这一点要尤其注意。

jquery 设置 checkbox选择行的input 为不可以编辑状态

jquery设置checkbox选择行的input，为不可以状态，是设置错误造成的，解决方法如下:

1、首先新建一个html文件，命名为test.html。

2、在test.html文件内，在p标签内，使用input标签创建一个checkbox选项和一个文本框，并且文本框设置默认值。

3、在test.html文件内，给每一个checkbox类型input元素设置name属性，统一设置为ck，主要用于下面通过该name获得input对象。

4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“获得input值”。

5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行getinput（）函数。

6、最后在浏览器打开test.html文件，点击按钮，查看结果，就完成了。

jquery中怎么选中所有的checkbox的值

1、checkbox日常jquery操作。
现在我们以下面的html为例进行checkbox的操作。
《input id="checkAll" type="checkbox" /》全选
《input name="subBox" type="checkbox" /》项1
《input name="subBox" type="checkbox" /》项2
《input name="subBox" type="checkbox" /》项3
《input name="subBox" type="checkbox" /》项4
全选和全部选代码：
《script type="text/javascript"》
$(function() {
$("#checkAll").click(function() {
$(’input’).attr("checked",this.checked);
});
var $subBox = $("input");
$subBox.click(function(){
$("#checkAll").attr("checked",$subBox.length == $("input:checked").length ? true : false);
});
});
《/script》
checkbox属性：
var val = $("#checkAll").val();// 获取指定id的复选框的值
var isSelected = $("#checkAll").attr("checked"); // 判断id=checkAll的那个复选框是否处于选中状态，选中则isSelected=true;否则isSelected=false;
$("#checkAll").attr("checked", true);// or
$("#checkAll").attr("checked", ’checked’);// 将id=checkbox_id3的那个复选框选中，即打勾
$("#checkAll").attr("checked", false);// or
$("#checkAll").attr("checked", ’’);// 将id=checkbox_id3的那个复选框不选中，即不打勾
$("input").attr("checked", ’checked’);// 将name=subBox, value=3 的那个复选框选中，即打勾
$("input").attr("checked", ’’);// 将name=subBox, value=3 的那个复选框不选中，即不打勾
$("input").get(2).checked = true;// 设置index = 2，即第三项为选中状态
$("input:checked").each(function(){ //由于复选框一般选中的是多个,所以可以循环输出选中的值
alert($(this).val());
});
2、radio的jquery日常操作及属性
我们仍然以下面的html为例：
《input type="radio" name="radio" id="radio1" value="1" /》1
《input type="radio" name="radio" id="radio2" value="2" /》2
《input type="radio" name="radio" id="radio3" value="3" /》3
《input type="radio" name="radio" id="radio4" value="4" /》4
radio操作如下：
$("input:eq(0)").attr("checked",’checked’); //这样就是第一个选中咯。
//jquery中，radio的选中与否和checkbox是一样的。
$("#radio1").attr("checked","checked");
$("#radio1").removeAttr("checked");
$("input:checked").length == 0 ? "没有任何单选框被选中" : "已经有选中";
$(’input:checked’).val(); // 获取一组radio被选中项的值
$("input").attr("checked", "checked");// 设置value = 2的一项为选中
$("#radio2").attr("checked", "checked"); // 设置id=radio2的一项为选中
$("input").get(1).checked = true; // 设置index = 1，即第二项为当前选中
var isChecked = $("#radio2").attr("checked");// id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false;
var isChecked = $("input").attr("checked");// value=2的一项处于选中状态则isChecked = true, 否则isChecked = false;
3、select下拉框的日常jquery操作
select操作相比checkbox和radio要相对麻烦一些，我们仍然以下面的html为例来说明：
《select name="select" id="select_id" style="width: 100px;"》
《option value="1"》11《/option》
《option value="2"》22《/option》
《option value="3"》33《/option》
《option value="4"》44《/option》
《option value="5"》55《/option》
《option value="6"》66《/option》
《/select》
看select的如下属性：
$("#select_id").change(function(){ // 1.为Select添加事件，当选择其中一项时触发
//code...
});
var checkValue = $("#select_id").val(); // 2.获取Select选中项的Value
var checkText = $("#select_id :selected").text(); // 3.获取Select选中项的Text
var checkIndex = $("#select_id").attr("selectedIndex"); // 4.获取Select选中项的索引值,或者：$("#select_id").get(0).selectedIndex;
var maxIndex =$("#select_id :last").get(0).index; // 5.获取Select最大的索引值
/**
* jQuery设置Select的选中项
*/
$("#select_id").get(0).selectedIndex = 1; // 1.设置Select索引值为1的项选中
$("#select_id").val(4); // 2.设置Select的Value值为4的项选中
/**
* jQuery添加/删除Select的Option项
*/
$("#select_id").append("《option value=’新增’》新增option《/option》"); // 1.为Select追加一个Option(下拉项)
$("#select_id").prepend("《option value=’请选择’》请选择《/option》"); // 2.为Select插入一个Option(第一个位置)
$("#select_id").get(0).remove(1); // 3.删除Select中索引值为1的Option(第二个)
$("#select_id :last").remove(); // 4.删除Select中索引值最大Option(最后一个)
$("#select_id ").remove(); // 5.删除Select中Value=’3’的Option
$("#select_id").empty();
$("#select_id").find("option:selected").text(); // 获取select 选中的 text :
$("#select_id").val(); // 获取select选中的 value:
$("#select_id").get(0).selectedIndex; // 获取select选中的索引:
//设置select 选中的value：
$("#select_id").attr("value","Normal");
$("#select_id").val("Normal");
$("#select_id").get(0).value = value;
//设置select 选中的text，通常可以在select回填中使用
var numId=33 //设置text==33的选中！
var count=$("#select_id option").length;
for(var i=0;i《count;i++)
{ if($("#select_id").get(0).opti***.text == numId)
{
$("#select_id").get(0).opti***.selected = true;
break;
}
}
通过上面的总结，应该对jquery的checkbox,radio和select有了一定的了解了吧，温故而知新，用多了就会变的熟练起来，即使有时候忘记了，也可以来翻一翻！

jquery 获取一组 checkbox 没被选中的值

代码如下：

var id_array=new Array();  

$(’input:checked’).each(function(){  

    id_array.push($(this).val());//向数组中添加元素  

});  

var idstr=id_array.join(’,’);//将数组元素连接起来以构建一个字符串  

alert(idstr);  

扩展资料

jQuery对checkbox的各种操作

1、根据id获取checkbox

$("#cbCheckbox1");

2、获取所有的checkbox

$("input");//or

$("input");

3、获取所有选中的checkbox

$("input:checkbox:checked");//or

$("input::checked");//or

$("input:checked");//or

$("input::checked");

jquery如何获取checkbox，并判断是否选中

常用的就两种：

$("input").attr("checked") == "checked" or "undefined"

$("input").prop("checked") == true or false

可以参考网页链接

如何用jQuery实现checkbox全选

全选：

$(":checkbox").attr("checked","checked");

全不选：

$(":checkbox").removeAttr("checked");

反选：

$(":checkbox:checked").removeAttr("checked");

$(":checkbox:not(:checked)").attr("checked","checked");

全手写，没有经过测试。

完整代码如下，测试通过：

《html》
《head》
    《title》如何用jQuery实现checkbox全选《/title》
    《script src="jquery-1.7.1.min.js"》《/script》
    《script type="text/javascript"》
        //全选，全不选
        function allSelect() {
            if ($(":checkbox").attr("checked") != "checked") {
                $(":checkbox").attr("checked", "checked");
            }
            else {
                $(":checkbox").removeAttr("checked");
            }
        }
        //反选
        function otherSelect() {
            $(":checkbox").each(function () {
                if ($(this).attr("checked") == "checked") {
                    $(this).removeAttr("checked");
                }
                else {
                    $(this).attr("checked", "checked");
                }
            });
        }
    《/script》
《/head》
《body》
    《input id="Checkbox1" type="checkbox" /》
    《input id="Checkbox2" type="checkbox" /》
    《input id="Checkbox3" type="checkbox" /》
    《input id="Checkbox4" type="checkbox" /》
    《input id="Checkbox5" type="checkbox" /》
    《input id="Button1" type="button" value="全选" onclick="allSelect();" /》
    《input id="Button3" type="button" value="反选" onclick="otherSelect();" /》
《/body》
《/html》