js实现点击button给指定的input名称相同的value赋值

最新推荐文章于 2021-11-11 11:45:51 发布

徊忆羽菲

最新推荐文章于 2021-11-11 11:45:51 发布

阅读量2.8k

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/88896244

版权

Javascript 专栏收录该内容

231 篇文章 5 订阅

订阅专栏

通过JS给input中的value赋值

点击赋值按钮，为所有的文本框赋值；点击取值按钮，将所有的文本框的值打印在控制台上

代码如下：


<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <title>循环赋值</title>  

</head>  
<body>
<label class="control-label col-md-2 col-sm-2 col-xs-12" name="prize_grade[]">一等奖</label><input type="text" name="prize_rank[]" value="1"/><br>
<label class="control-label col-md-2 col-sm-2 col-xs-12" name="prize_grade[]">一等奖</label><input type="text" name="prize_rank[]" value="2"/><br>
<label class="control-label col-md-2 col-sm-2 col-xs-12" name="prize_grade[]">一等奖</label><input type="text" name="prize_rank[]" value="3"/><br>
<label class="control-label col-md-2 col-sm-2 col-xs-12" name="prize_grade[]">一等奖</label><input type="text" name="prize_rank[]" value="1"/><br>
<label class="control-label col-md-2 col-sm-2 col-xs-12" name="prize_grade[]">一等奖</label><input type="text" name="prize_rank[]" value="5"/><br>
<label class="control-label col-md-2 col-sm-2 col-xs-12" name="prize_grade[]">一等奖</label><input type="text" name="prize_rank[]" value="5"/><br>
<label class="control-label col-md-2 col-sm-2 col-xs-12" name="prize_grade[]">一等奖</label><input type="text" name="prize_rank[]" value="6"/><br>
<button>赋值</button><br>
<button>取值</button>
<br><br><br>
<script>
    var  prize_grade = ['一','二','三', '四','五','六','七', '八','九', '十'];
    var rankArr = document.getElementsByName("prize_rank[]");
    var gradeArr = document.getElementsByName("prize_grade[]");
    var inpArr = document.getElementsByTagName("input");
var buArr = document.getElementsByTagName("button");
//赋值
buArr[0].onclick = function(){
/*    for (var i = 0; i < inpArr.length; i++) {
        inpArr[i].value=i;
    }*/
    var num=1;
    for (var j = 0; j < rankArr.length; j++) {
        rankArr[j].value=num;
        gradeArr[j].textContent=prize_grade[j]+"等奖";
        num++;
    }
}
//取值
buArr[1].onclick = function(){
    var newArr=[];
    for (var i = 0; i < inpArr.length; i++) {
        newArr.push(inpArr[i].value);
    }
    console.log(newArr.join("-"));
}
</script>
</body>
</html>

点击赋值按钮前，效果如下：
在这里插入图片描述
点击赋值按钮后，效果如下：

点击取值后

徊忆羽菲

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js实现点击button给指定的input名称相同的value赋值

js实现点击button给指定的input名称相同的value赋值点击赋值按钮，为所有的文本框赋值；点击取值按钮，将所有的文本框的值打印在控制台上代码如下：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>循环赋值</tit...
复制链接

扫一扫