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

Jquery实现复选框全选与全不选,第1张

1、首先web项目结构如图所示,这个结构熟悉的话可以自己调整的。

2、然后设置一些较为简单的选项框,这里随便用abcd来代替选项框了。

3、这里是jq来实现全选,所以引入jQuery,并且给按钮绑定一个jQuery类型的点击事件即可。

4、然后通过prop来设置input的属性即可设置全选了,prop是jq自带的一个方法。

5、因为CheckBox可以设置checked属性,所以我们把它设置为true即可。

6、最后预览,可以看到CheckBox都被checked中了,这样就达到全选了。

把name设置能一样的
之后就可以$_REQUEST['NAME']
是个array
如:(我用的是php)
<input type=checkbox name=checkbox[] id=checkbox_1 value=被取到的值1 checked=true />
<input type=checkbox name=checkbox[] id=checkbox_2 value=被取到的值2 checked=true />
<input type=checkbox name=checkbox[] id=checkbox_3 value=被取到的值3 checked=true />
$allready_arr=$_REQUEST[checkbox];
这个时候提交以后。被选中的checkbox的value就取到了
下面是常用的。全选和反选
function checkAll(form)
{
for (var i=0;i<formelementslength;i++)
{
var e = formelements[i];
// if (ename != 'chkall')
echecked = true// formchkallchecked;
}
}
function checkOthers(form)
{
for (var i=0;i<formelementslength;i++)
{
var e = formelements[i];
// if (ename != 'chkall')
if (echecked==false)
{
echecked = true;// formchkallchecked;
}
else
{
echecked = false;
}
}
}

<script type="text/javascript" language="javascript">
function selectAllDels()
{ var allCheckBoxs = documentgetElementsByName("preDelCheck");
var desc = documentgetElementById("allChecked");
var selectOrUnselect=false;
for(var i = 0; i < allCheckBoxslength; i ++ ) {
if(allCheckBoxs[i]checked){
selectOrUnselect=true;
break; } }
if (selectOrUnselect) {
_allUnchecked(allCheckBoxs); }else {
_allchecked(allCheckBoxs); } }
function _allchecked(allCheckBoxs){
for(var i = 0; i < allCheckBoxslength; i ++ ) {
allCheckBoxs[i]checked = true; } }
function _allUnchecked(allCheckBoxs){
for(var i = 0; i < allCheckBoxslength; i ++ ) {
allCheckBoxs[i]checked = false; } } </script>
<form> <input type="checkbox" name="preDelCheck" value="cream">ID1
<input type="checkbox" name="preDelCheck" value="sugar" >ID2
<input type="checkbox" name="preDelCheck" value="sugar">ID3
<input type="button" id="allChecked" value="全选/取消全选" onClick="selectAllDels()"> </form>

你自己改下控件名字就可以了啊!
下面自己放连个文件试
---
1php
<script>
function $(id){
return documentgetElementById(id);
}
function checkalls(obj,form){

var bool=(objchecked)true:false;
for(var i=0;i<formlength;i++){
formall[i]selected=bool;
}
}
</script>
<form action="2php" method="post" >
<input type="checkbox" name="checkall" id="checkall" onclick="checkalls(this,$('select'))" checked>全选<br>
<select multiple name="select[]" id="select" size="15" style="width:210px;height:250px">
<option value="1" selected>顿饭大幅度</option>
<option value="2" selected>大幅度</option>
<option value="3" selected>大幅缩</option>
<option value="4" selected>到司法所</option>
</select>
<INPUT TYPE="submit" value="提交">
</form>
---
2php
<
echo $select[0];
echo $select[1];
echo $select[2];
echo $select[3];
>


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

原文地址: https://outofmemory.cn/yw/13324442.html

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

发表评论

登录后才能评论

评论列表(0条)

保存