jquery怎么获取多个被选中的checkbox_框架

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<label for="h5courseCom1">HTML5学堂，一个神奇的网站</label>

<label for="h5courseCom2">h5course-com</label>

<label for="h5courseCom3">h5course-cn</label>

<label for="h5courseCom4">h5course-cn</label>

<label for="h5courseCom5">h5course-cn</label>

</form>

alert('选中了这么多个：' + $('input[type=checkbox]:checked')length);

</script>

</body>

</html>

看看上面的案例，引入jQuery，可以直接运行看效果。

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

全选和全部选代码：

$(function() {

$("#checkAll")click(function() {

$('input[name="subBox"]')attr("checked",thischecked);

});

var $subBox = $("input[name='subBox']");

$subBoxclick(function(){

$("#checkAll")attr("checked",$subBoxlength == $("input[name='subBox']: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[name=subBox][value=3]")attr("checked", 'checked');// 将name=subBox, value=3 的那个复选框选中，即打勾

$("input[name=subBox][value=3]")attr("checked", '');// 将name=subBox, value=3 的那个复选框不选中，即不打勾

$("input[type=checkbox][name=subBox]")get(2)checked = true;// 设置index = 2，即第三项为选中状态

$("input[type=checkbox]: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[name=radio]:eq(0)")attr("checked",'checked'); //这样就是第一个选中咯。

//jquery中，radio的选中与否和checkbox是一样的。

$("#radio1")attr("checked","checked");

$("#radio1")removeAttr("checked");

$("input[type='radio'][name='radio']:checked")length == 0 "没有任何单选框被选中" : "已经有选中";

$('input[type="radio"][name="radio"]:checked')val(); // 获取一组radio被选中项的值

$("input[type='radio'][name='radio'][value='2']")attr("checked", "checked");// 设置value = 2的一项为选中

$("#radio2")attr("checked", "checked"); // 设置id=radio2的一项为选中

$("input[type='radio'][name='radio']")get(1)checked = true; // 设置index = 1，即第二项为当前选中

var isChecked = $("#radio2")attr("checked");// id=radio2的一项处于选中状态则isChecked = true, 否则isChecked = false;

var isChecked = $("input[type='radio'][name='radio'][value='2']")attr("checked");// value=2的一项处于选中状态则isChecked = true, 否则isChecked = false;

3、select下拉框的日常jquery *** 作

select *** 作相比checkbox和radio要相对麻烦一些，我们仍然以下面的html为例来说明：

</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 [value='3']")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)options[i]text == numId)

{

$("#select_id")get(0)options[i]selected = true;

break;

}

通过上面的总结，应该对jquery的checkbox,radio和select有了一定的了解了吧，温故而知新，用多了就会变的熟练起来，即使有时候忘记了，也可以来翻一翻！

jquery的遍历方法可以获取复选框所欲的选中值

$("input:checkbox:checked")each(function(index,element)); // 为所有选中的复选框执行函数，函数体中可以取出每个复选框的值

$("input:checkbox:checked")map(function(index,domElement)); // 将所有选中的复选框通过函数返回值生成新的jQuery 对象

实例演示：点击按钮获取checkbox的选中值

创建Html元素

<span>点击按钮获取checkbox的选中值：</span>

<input type='checkbox' name='message' value='1'/>发送短信

<input type='checkbox' name='message' value='2'/>发送邮件

</div>

</div>

设置css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

编写jquery代码

$(function(){

$("input:button")click(function() {

text = $("input:checkbox[name='message']:checked")map(function(index,elem) {

return $(elem)val();

})get()join(',');

alert("选中的checkbox的值为："+text);

});

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"的选择。进行选项组合。

通过选择器 “：checked”和“is”来判断，匹配所有选中的被选中元素(复选框、单选框等，select中的option)，但对于select元素来说，获取选中推荐使用 :selected，用法:

if($('[name=gender]:eq(0)')is(':checked')) { alert('提示信息') }

这里主要是对于表单属性选择器的运用，中列表了一部分，另外还有not、:animated、:focus等，更多可以参考jquery api资料，会有详细叙述（百度搜索jquery api即可找到）

下面是一个关于问题的示例：

Jquery获取 check所有选中的值

var pausedCause = '';

$(":checkbox[name='pausedCause'][checked]")each(function(){

pausedCause += thisvalue + ',';

})

pausedCause = pausedCausesubstring(0,pausedCauselength-1);

思路：通过 :checked 筛选 checkbox 选中项，然后进行遍历，利用节点关系获取到input对象，最后使用val()方法获取input的内容。实例演示如下:

1、HTML结构

<table>

<tr>

</tr>

<tr>

</tr>

</table>

2、jquery代码

$(function(){

$(":button")click(function() {

// 找到选中行的input

var ipts = $(":checkbox:checked")parents("tr")find("input:text");

// 遍历input并使用val()方法获取值

str = map(function() {return $(this)val();})get()join(", ");

alert(str);

});

3、效果演示

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

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

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

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

以上就是关于jquery怎么获取多个被选中的checkbox全部的内容，包括:jquery怎么获取多个被选中的checkbox、jquery 怎么选中checkbox指定的值、如何获取checkbox 全部的值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/9702956.html

jquery怎么获取多个被选中的checkbox

发表评论

评论列表（0条）