javascript练习代码分享(1)

对如下的Form表单

 <form id="test-form" action="test"> <legend>请选择想要学习的编程语言:</legend> <fieldset> <p><label class="selectAll"><input type="checkbox"> <span class="selectAll">全选</span><span class="deselectAll">全不选</span></label> <a href="#0" class="invertSelect">反选</a></p> <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p> <p><label><input type="checkbox" name="lang" value="python"> Python</label></p> <p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p> <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p> <p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p> <p><button type="submit">Submit</button></p> </fieldset> </form> 

绑定合适的事件处理函数,实现以下逻辑
1.当用户勾上“全选”时,自动选中所有语言,并把“全选”变成“全不选”;
2.当用户去掉“全不选”时,自动不选中所有语言; 当用户点击“反选”时,自动把所有语言状态反转(选中的变为未选,未选的变为选中);
3. 当用户把所有语言都手动勾上时,“全选”被自动勾上,并变为“全不选”;
4. 当用户手动去掉选中至少一种语言时,“全不选”自动被去掉选中,并变为“全选”。

我也是刚刚接触,也不知道怎么排版,所有的逻辑都在<head>实现,body部分是源页面结构,就不需要分析了

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-3.5.1.js"></script> 
<script>
$(function(){
var langall=$('input:checkbox[name="lang"]');//表单里所有的语言
var selectcheckbox=$('.selectAll input:checkbox');//全选和全不选的对应的那一个checkbox
var fanxuan_a=$('a.invertSelect');//反选的点击链接
var all_select=false;//几种语言是否全被选中

$('span.deselectAll').hide();//由于一上来对应着是没有被选中的状态,所以在全选那里对应着显示全选,隐藏不全选

//实现判断是否每个语言都被选中...
function isallselect()
{
langall.each(
function ()
{
if(this.checked==false)
{all_select=false;
return false;
}
all_select= true;
})
};

//修改全选框和全不选框,实现3,4功能
function changeselectcheckbox()
{
isallselect();//判断状态
if(all_select==true)
{
$('span.selectAll').hide();//都全选了,需要隐藏起全选了
$('span.deselectAll').show();//显示不全选
$('.selectAll input:checkbox').prop('checked',true);//把全选框打勾
}
else
 {
$('span.deselectAll').hide();//不是全选状态,需要隐藏起不全选
$('span.selectAll').show();//显示全选
$('.selectAll input:checkbox').prop('checked',false);//不打勾
}
};

langall.change(changeselectcheckbox);//再每一次语言选择发生改变时修改

function selectall()
{
if($('.selectAll input:checkbox').prop('checked')==true)
{
langall.prop('checked',true);//勾上所有语言
$('span.selectAll').hide();//隐藏全选
$('span.deselectAll').show();//显示不全选
}
else
{
langall.prop('checked',false);
$('span.deselectAll').hide();
$('span.selectAll').show();
}
};
selectcheckbox.change(changeselectcheckbox);//同理也是再selectchebox改变时候执行

$('a.invertSelect').click(function ()
{
for(var i=0;i<langall.length;i++)//通过循环取反
langall[i].checked=!langall[i].checked;
changeselectcheckbox();//修改全选框状态
})
});
</script>
</head>
<body>
<form id="test-form" action="test"> 
<legend>请选择想要学习的编程语言:</legend> 
<fieldset>
 <p>
<label class="selectAll"><input type="checkbox"> 
<span class="selectAll">全选</span>
<span class="deselectAll">全不选</span>
</label>
<a href="#0" class="invertSelect">反选</a>
</p>
 <p><label><input type="checkbox" name="lang" value="javascript"> JavaScript</label></p> 
<p><label><input type="checkbox" name="lang" value="python"> Python</label></p> 
<p><label><input type="checkbox" name="lang" value="ruby"> Ruby</label></p>
 <p><label><input type="checkbox" name="lang" value="haskell"> Haskell</label></p> 
<p><label><input type="checkbox" name="lang" value="scheme"> Scheme</label></p> 
<p><button type="submit">Submit</button></p> 
</fieldset> </form>
</body>
</html>

首先要注意,所有代码要在代码部分填写,因为涉及到初始化问题,不然的话无法绑定dom节点

<script>
$(function()
{
代码部分
});
</script>

最开始没动脑子,直接写函数,然后发现只执行一次,因为我们没有绑定响应事件,所以只会在初始化的时候执行一次,大家不要犯这种低级错误

在写isallselect()函数时也遇到了许多问题,首先是
1.不可以通过langall.prop(‘checked’)来判断是否全选,这是prop的判断机理,如果langall着多个checkbox,则会根据第一个checkbox的状态返回,所以我们得到的结果并不是全部的checkbox但是langall.prop(‘checked’,true);却可以把所有的语言都勾上,langall.prop(‘checked’,false)也会取消所有语言(有点怪怪的)
2.循环遍历,当时我也找到了一种方法,就是通过for(i=0;i<langall.length;i++) langall[i].prop(‘checked’)来判断,这个想法很好,但是结果 langall[i]下面没有prop()这个函数,所以这个方法也行不通(当然大佬可以通过改变this实现),不过langall[i].checked还是可以使用的
3.本来开始想通过跟c程一样,return true or false进行判断,但这里返回结果一直是undefined就也行不通,只能通过全局变量来实现(当然…是我太菜了)
4.langall.each()和for循环差不多都是一个道理
5.如果是langall.each()的话,break无法使用,会报错,所以通过return false来跳出循环

还有一个地方需要注意,特别区分响应事件
一般情况下都是通过使用change,但是<a>对应的是click,这个事件响应要区分开

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值