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,这个事件响应要区分开

javascript练习代码分享(1)

猜你喜欢