chosen.jquery.js多选 jquery实现多选按钮全选取消

最近在使用chosen这个jQuery插件，想要使optgroup能被点击，点击组的名字自动全选该组中的所有选项。

这个插件挺好的，只是，多选的时候需要多次点击才可以，而且每次都要重新获取焦点，没有全选按钮，建议在他的js中根据需求开发扩展，我也正在研究这个插件。

相关问答

Q1: Jquery实现复选框全选与全不选

1、创建一个html，然后在body标签添加如下图所示的代码，主要是在一个表格中包含多选框。

2、然后首要就是要引入jquery的库。注意jquery库的方式：script src="js/jquery-1.8.3.js" /script 不能写成script src="js/jquery-1.8.3.js" /这种方式。否则无效！大家可以去尝试一下这两个的差别。

3、然后再来一个jquery的加载函数，加载函数是jquery的标配。下面这种方式的话是属于比较简写的了。

4、接下来根据id获取全选框的元素，然后给全选框绑定点击事件。

5、在点击事件方法中完成：获取类属性值为checkOne的多选框；然后将通过prop(属性，值)方法，来将checked属性设置成跟全选/全不选框的checked一样。

Q2: jquery.chosen.js 在模糊搜索的时候，只能够匹配以相同 字符开头的 选项，现在我想要匹配所有项目，譬如

模糊查询时，chosen默认从第一个字符搜索，所以写中间的字符搜索时，是搜索不出来的

--下面的js中（search_contains属性为true即可）可以让chosen搜索选项的中间及末尾字符

no_results_text是搜索不到内容时，显示的提示语

placeholder_text是下拉选项默认显示的文字

disable_search_threshold是select的option选项大于等于此值，才会显示查询的文本框

jQuery(".chosen").chosen({

no_results_text: "My language message.",

placeholder_text : "My language message.",

search_contains: true,

disable_search_threshold: 10

});

或者是直接将jquery.chosen.js的源码修改了

将this.search_contains = this.options.search_contains || !1

改为this.search_contains = true || !1

Q3: 如何获取 chosen chosen.jquery.js 选中的值

假设选项固定，需要通过代码修改选中项，处理顺序为

1、先将原有选中项删除

$("#XXXX option[selected='selected']").attr('selected',false);

2、设定新的选中项

$("#XXXX option[value='aaa']").attr("selected",true);

3、重新刷新chosen

if ($("#XXXX").hasClass('chzn-done'))

$("#XXXX").chosen('destroy');

$("#XXXX").chosen(...);

Q4: 动态生成的select怎么多选chosen jquery

可以在动态生成select时为其加上multiple属性，则该下拉框会变成多选下拉框，支持按住ctrl或shift键多选。此时获取select的值会得到一个数组。示例：

select name="" id="sel"

option value="1"选项1/option

option value="2"选项2/option

option value="3"选项3/option

/select

$('#select').val(); // 得到一个数组

Q5: jquery中怎样获得多选框中，被选择的个数？

获取 checkbox的选中个数可以直接使用如下jquery语法

$("input[type='checkbox']:checked").length;

实例演示如下

创建Html元素

div class="box"

span点击按钮获取选中个数：/spanbr

div class="content"

input type="checkbox" name="test" 萝卜

input type="checkbox" name="test" 青菜

input type="checkbox" name="test" 小葱

input type="checkbox" name="test" 豆腐

input type="checkbox" name="test" 土豆

/div

input type="button" class="btn" value="获取被选择个数"

/div

设置css样式

div.box{width:300px;height:250px;padding:10px 20px;margin:20px;border:4px dashed #ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;height:100px;margin:10px 0;padding:5px 20px;border:2px solid #ff6666;}

input[type='checkbox']{margin:5px 10px;}

input[type='button']{width:120px;height:30px;margin:10px;border:2px solid #ebbcbe;}

编写jquery代码

$(function(){

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

alert($("input[type='checkbox']:checked").length);

});

})

观察效果

chosen.jquery.js多选的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于jquery实现多选按钮全选取消、chosen.jquery.js多选的信息别忘了在本站进行查找喔。