                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /JavaScript進(jìn)階篇

全選的實(shí)現(xiàn)

function?checkall(){
????????????var?hobby?=?document.getElementsByTagName("input");
????????????for(var?i=0;i<hobby.length;i++){
????????????????if(hobby[i].type=="checkbox")
????????????????hobby[i].checked=true;
????????????}

可以用document.getElementsByName("hobby");的方法去實(shí)現(xiàn)嗎？

陳國(guó)侯

2016-11-05

源自：JavaScript進(jìn)階篇 9-4

關(guān)注問題我要回答

699

操作

收起

4 回答

慕村1994845 回答被采納 +3 積分
2016-11-22

<!DOCTYPE?HTML>
<html>
????<head>
????????<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
????????<title>無(wú)標(biāo)題文檔</title>
????</head>
????
????<body>
????????<form>
??????????請(qǐng)選擇你愛好:<br>
??????????<input?type="checkbox"?name="hobby"?id="hobby1">??音樂
??????????<input?type="checkbox"?name="hobby"?id="hobby2">??登山
??????????<input?type="checkbox"?name="hobby"?id="hobby3">??游泳
??????????<input?type="checkbox"?name="hobby"?id="hobby4">??閱讀
??????????<input?type="checkbox"?name="hobby"?id="hobby5">??打球
??????????<input?type="checkbox"?name="hobby"?id="hobby6">??跑步?<br>
??????????<input?type="button"?value?=?"全選"?onclick?=?"checkall();">
??????????<input?type="button"?value?=?"全不選"?onclick?=?"clearall();">
??????????<p>請(qǐng)輸入您要選擇愛好的序號(hào)，序號(hào)為1-6:</p>
??????????<input?id="wb"?name="wb"?type="text"?>
??????????<input?name="ok"?type="button"?value="確定"?onclick?=?"checkone();">
????????</form>
????????<script?type="text/javascript">
????????function?checkall(){
????????????var?hobby?=?document.getElementsByTagName("input");
????????????for(var?i=0;i<hobby.length;i++){
????????????????
????????????????????hobby[i].checked=true;
????????????????
????????????}
??????????//?任務(wù)1?
???????????
????????}
????????function?clearall(){
????????????var?hobby?=?document.getElementsByName("hobby");
????????????for(var?i=0;i<hobby.length;i++){
????????????????
????????????????????hobby[i].checked=false;
????????????????
????????????}
?????????//?任務(wù)2????
????????????
????????}
????????
????????function?checkone(){
???????????var?j=document.getElementById("wb").value;
????????//????if(j==1){
????????//????????document.getElementById("hobby1").checked=true;
????????//????}
????????//????else?if(j==2){
????????//????????document.getElementById("hobby2").checked=true;
????????//????}
????????//?????else?if(j==3){
????????//????????document.getElementById("hobby3").checked=true;
????????//????}
????????//?????else?if(j==4){
????????//????????document.getElementById("hobby4").checked=true;
????????//????}
????????//?????else?if(j==5){
????????//????????document.getElementById("hobby5").checked=true;
????????//????}
????????//????else{
????????//????????document.getElementById("hobby6").checked=true;
????????//????}
??????????var?k=document.getElementsByName("hobby");
???????????for(var?n=0;n<k.length;n++){
???????????????if(k[n].checked=true){
???????????????????k[n].checked=false;
???????????????}
?????????????if(j==n+1){
?????????????????k[n].checked=true;
?????????????????n=n+1;
?????????????????k[n-2].checked=false;????
?????????????}
?????????????
???????????}
????????}
???????
????????</script>
????</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

慕村1994845
2016-12-03

function?checkone(){
???????????var?j=document.getElementById("wb").value;
???????????var?k=document.getElementsByName("hobby");
???????????for(var?n=0;n<k.length;n++){
???????????????if(k[n].checked=true){
???????????????????k[n].checked=false;
???????????????????//這里的作用是為了清除上一次被選中的項(xiàng)
???????????????}
?????????????if(j==n+1){
?????????????????k[n].checked=true;
????????????????//?n=n+1;
????????????????//?k[n-2].checked=false;????
?????????????}//代碼運(yùn)行到這里，但你在輸入框輸入一個(gè)數(shù)字時(shí)，比如2。就會(huì)有對(duì)應(yīng)的選項(xiàng)被選中；
?????????????//而當(dāng)再次輸入另一個(gè)數(shù)字，比如4，確認(rèn)后，2的選項(xiàng)就會(huì)清除，也就是4之前的選項(xiàng)就會(huì)清除
?????????????//我的代碼其實(shí)不是最優(yōu)化的，你可以看其他同學(xué)的有些效果看起來(lái)更明了些，我只是習(xí)慣記錄自己寫代碼的思路，就會(huì)注釋很多代碼而沒有刪掉

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕村1994845

這里j=document.getElementById("wb").value好像有問題；應(yīng)該用j=parseInt(document.getElementById("wb"))；因?yàn)榍罢叩玫降氖亲址荒芎蚽+1劃等號(hào)，n+1是數(shù)值

2016-12-03 回復(fù) 有任何疑惑可以回復(fù)我~

#2

卡蘭尼克回復(fù) 慕村1994845

謝謝謝謝

2016-12-06 回復(fù) 有任何疑惑可以回復(fù)我~

慕村1994845
2016-11-22

可以用?。】聪挛业拇a：（任務(wù)一上的注釋）

<!DOCTYPE?HTML>
<html>
????<head>
????????<meta?http-equiv="Content-Type"?content="text/html;?charset=gb2312">
????????<title>無(wú)標(biāo)題文檔</title>
????</head>
????
????<body>
????????<form>
??????????請(qǐng)選擇你愛好:<br>
??????????<input?type="checkbox"?name="hobby"?id="hobby1">??音樂
??????????<input?type="checkbox"?name="hobby"?id="hobby2">??登山
??????????<input?type="checkbox"?name="hobby"?id="hobby3">??游泳
??????????<input?type="checkbox"?name="hobby"?id="hobby4">??閱讀
??????????<input?type="checkbox"?name="hobby"?id="hobby5">??打球
??????????<input?type="checkbox"?name="hobby"?id="hobby6">??跑步?<br>
??????????<input?type="button"?value?=?"全選"?onclick?=?"checkall();">
??????????<input?type="button"?value?=?"全不選"?onclick?=?"clearall();">
??????????<p>請(qǐng)輸入您要選擇愛好的序號(hào)，序號(hào)為1-6:</p>
??????????<input?id="wb"?name="wb"?type="text"?>
??????????<input?name="ok"?type="button"?value="確定"?onclick?=?"checkone();">
????????</form>
????????<script?type="text/javascript">
????????function?checkall(){
????????????var?hobby?=?document.getElementsByName("hobby");
????????????
????????????for(var?i=0;i<hobby.length;i++){
????????????????
????????????????????hobby[i].checked=true;
????????????????
????????????}
????????????//這里可以用byname，例子用tagname是為了使用三種不同方法
??????????//?任務(wù)1?
???????????
????????}
????????function?clearall(){
????????????var?hobby?=?document.getElementsByName("hobby");
????????????for(var?i=0;i<hobby.length;i++){
????????????????
????????????????????hobby[i].checked=false;
????????????????
????????????}
?????????//?任務(wù)2????
????????????
????????}
????????
????????function?checkone(){
???????????var?j=document.getElementById("wb").value;
????????//????if(j==1){
????????//????????document.getElementById("hobby1").checked=true;
????????//????}
????????//????else?if(j==2){
????????//????????document.getElementById("hobby2").checked=true;
????????//????}
????????//?????else?if(j==3){
????????//????????document.getElementById("hobby3").checked=true;
????????//????}
????????//?????else?if(j==4){
????????//????????document.getElementById("hobby4").checked=true;
????????//????}
????????//?????else?if(j==5){
????????//????????document.getElementById("hobby5").checked=true;
????????//????}
????????//????else{
????????//????????document.getElementById("hobby6").checked=true;
????????//????}
??????????var?k=document.getElementsByName("hobby");
???????????for(var?n=0;n<k.length;n++){
???????????????if(k[n].checked=true){
???????????????????k[n].checked=false;
???????????????}
?????????????if(j==n+1){
?????????????????k[n].checked=true;
????????????????//?n=n+1;
????????????????//?k[n-2].checked=false;????
?????????????}
?????????????
???????????}
????????}
???????
????????</script>
????</body>
</html>

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答

#1

慕村1994845

怎么復(fù)制上來(lái)的代碼是亂碼，坑了

2016-11-22 回復(fù) 有任何疑惑可以回復(fù)我~

#2

卡蘭尼克

用getElementByName("hobby"）為什么還要用for循環(huán)語(yǔ)句..不是input中所有name都是hobby嗎。。。

2016-12-01 回復(fù) 有任何疑惑可以回復(fù)我~

#3

卡蘭尼克回復(fù) 慕村1994845

然后用hobby.checked=true不就把名為hobby的全部選中了嗎。。。為什么還要用for循環(huán)來(lái)自加一來(lái)一個(gè)個(gè)選擇呀

2016-12-01 回復(fù) 有任何疑惑可以回復(fù)我~

查看4條回復(fù)

墨魚嬉戲
2016-11-06

可以，不過(guò)如若用document.getElementsByName("hobby")，得自己提前在標(biāo)簽里面加入name屬性，代碼的使用量會(huì)增加，自己得一個(gè)個(gè)的去添加name屬性，不過(guò)直接使用name屬性的話，自己對(duì)于自己的代碼也會(huì)很清楚，很容易進(jìn)行項(xiàng)目命名，顯得比較清晰。所以具體使用哪個(gè)，需要自己去進(jìn)行判斷考慮。。小小拙見，如果有什么不對(duì)的地方，請(qǐng)見諒。

0 回復(fù) 有任何疑惑可以回復(fù)我~

收起回答