jQuery 实现多选框功能

jQuery 实现多选框功能,第1张

jquery实现(多选框)全选和取消全选功能:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <meta http-equiv="content-type" content="text/html" charset="utf8">

    <title></title>

     /*要添加好jquery库*/

    <script type="text/javascript" src=\'#\'" /script>

    <script src=\'#\'" type="text/javascript"></script>

    <script type="text/javascript">

        function checkAll() {

            $("input:checkbox").attr("checked","true")

        }

        function uncheckAll() {

            $("input:checkbox").each(function(){

                this.checked=false

            })

            }

    </script>

</head>

<body>

<input type="checkbox" id="in1" />1<br />

<input type="checkbox" id="in2" />2<br />

<input type="checkbox" id="in3" />3<br />

<p>

<input type="button" name="checkAll" value="全选" />

<input type="button" name="uncheckAll" value="取消" />

</p>

</body>

</html>

//首先,你的想法和思路是对的,但你忽略了一个问题,jquery的选择器中表达式是 *** 作dom的,

//用变量连接表达式,看似没毛病,但实际在jquery中的实现是不能正常执行的。它当成了一个

//完整的表达式执行,所以不能正确选择到元素。因此代码修改成以下:

var selector = ":checkbox[name='gant'][mtype='" + qx + "']"

$(selector).attr("checked", true)

//到此,成功执行!

希望能帮到你!

<script src="../js/jquery-1.3.2.js" type="text/javascript"></script>

<script src="../js/jquery.multiSelect.js" type="text/javascript"></script>

<link href="css/jquery.multiSelect.css" rel="stylesheet" type="text/css" />

我用的是jQuery MultiSelect 插件下拉多选框,

Select:

<select id="control_7" name="control_7[]" multiple="multiple" size="5">

<option value="">请选择</option>

<option value="1">性病商务通</option>

<option value="2">商务通</option>

<option value="3">QQ</option>

<option value="4">性病QQ</option>

<option value="5">企业QQ</option>

<option value="6">电话</option>

<option value="7">性病电话</option>

<option value="8">微信</option>

<option value="9">竞D1</option>

<option value="10">竞D2</option>

<option value="11">竞D3</option>

<option value="12">竞D4</option>

<option value="13">400电话</option>

<option value="14">挂号网</option>

</select>

jQuery MultiSelect 插件:

.......................

if(jQuery) (function($){

//渲染HTML的一个单一的选项

function renderOption(id, option)

{

var html='<label><input type="checkbox" name="' + id + '[]" value="' + option.value + '"'

if( option.selected ){

html+='checked="checked"'

}

html += ' />' + option.text + '</label>'

return html

}

// 渲染选项/的HTML optgroups

function renderOptions(id, options, o)

{

var html = ""

for(var i = 0 i < options.length i++) {

if(options[i].optgroup) {

html += '<label class="optGroup">'

if(o.optGroupSelectable) {

html += '<input type="checkbox" class="optGroup"/>' + options[i].optgroup

}

else {

html += options[i].optgroup

}

html += '</label><div class="optGroupContainer">'

html += renderOptions(id, options[i].options, o)

html += '</div>'

}

else {

html += renderOption(id, options[i])

}

}

return html

}

我提交的时候都变没了,就一个了,我想要的是我选中几个默认选中就是几个。

在调用这个插件前用jquery设置optin的selected属性

JavaScript code?

var v='1,2,3'//这个为保存的值,自己从数据库读取来赋值给v变量v=','+v+','//添加分隔符号,好indexOf进行比较var arr=v.split(',')$('#control_7 option').each(function(){  if(v.indexOf(','+this.value+',')!=-1)this.selected=true})//再调用插件初始化select对象


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/tougao/11212866.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存