js 分行显示已选爱好

在上行选择自己的爱好后，效果如下图示：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h3>选择你的爱好：</h3>

<ul >

</ul>

</div>

<hr>

<ul>

<li><button οnclick="btn()">查看我选择的爱好</button></li>

</ul>

</div>

</body>

</html>

function btn(){

//获取最后一个div

var div_ = document.getElementById('xs');

//获取input

var input_ = document.getElementsByTagName('input');

if(input_[0].checked){

var aihao_ = document.getElementById('fl0').firstElementChild.nextSibling.nodeValue;

// console.log(aihao_);

div_.innerHTML = aihao_;

}

if(input_[1].checked){

var aihao1_ = document.getElementById('fl1').firstElementChild.nextSibling.nodeValue;

//console.log(aihao1_);

div_.innerHTML = div_ .innerHTML +'<br>'+ aihao1_;

}

if(input_[2].checked){

var aihao2_ = document.getElementById('fl2').firstElementChild.nextSibling.nodeValue;

//console.log(aihao2_);

div_.innerHTML = div_ .innerHTML +'<br>'+ aihao2_;

}

if(input_[3].checked){

var aihao3_ = document.getElementById('fl3').firstElementChild.nextSibling.nodeValue;

//console.log(aihao3_);

div_.innerHTML = div_ .innerHTML +'<br>'+ aihao3_;

}

if(input_[4].checked){

var aihao4_ = document.getElementById('fl4').firstElementChild.nextSibling.nodeValue;

//console.log(aihao4_);

div_.innerHTML = div_ .innerHTML +'<br>'+ aihao4_;

}

if(input_[5].checked){

var aihao5_ = document.getElementById('fl5').firstElementChild.nextSibling.nodeValue;

//console.log(aihao5_);

div_.innerHTML = div_ .innerHTML +'<br>'+ aihao5_;

}

if(input_[6].checked){

var aihao6_ = document.getElementById('fl6').firstElementChild.nextSibling.nodeValue;

//console.log(aihao6_);

div_.innerHTML = div_ .innerHTML +'<br>'+ aihao6_;

}

</script>

js 分行显示已选爱好相关推荐

选择用户-显示已选用户
1介绍选择用户是一个比較经常使用的功能,主要包括2个功能点(保存已选选项.显示已选用户) 功能要求: 1 选择用户界面以弹出框方式显示 2 页面选项动态载入(部门及用户) 3 已选用户以勾选方式显示 ...
原生js打印阅览复选框不显示问题
原生js打印阅览复选框不显示问题原生js打印预览,主要是阅览时候回出现一些问题,比如复选框传值,√不显示,那么怎么来解决这个问题呢?首先我们看一下效果图:我的页面是vue环境这是预览状态,√和元页 ...
JS file图片即选即得显示,前端交互图片即选即得
<table><tr><td><input type="file" name="sdfFile" id="s ...
dropzone.js应用java_javascript-如何使用Dropzone.js向您显示已存储在服务器上的文件...
javascript-如何使用Dropzone.js向您显示已存储在服务器上的文件我不明白... call其始终未定义创建模拟文件: var mockFile = { name: "Fi ...
问题 “cell 出栈 selectBox 已选的图标，被释放掉，再次进入屏幕时，没有了已选图标 ” 解决方案...
如何去解决列表里面的selectBox已选情况,在滑出屏幕后被清除的问题. 我来在这里详细说明一下, 在cell里面写一个方法,去专门修复滑出后,又滑进来图标被冲刷掉的cell. 在 cell ...
关于bootstrap的treeview不显示多选(复选框)的问题，以及联动选择的问题，外加多选后取值...
最近做项目用到了treeview.因为涉及到多选的问题,很是棘手,于是乎,我决定查看原生JS,探个究竟.需要引用官方的bootstrap-treeview.js都知道吧,对于所需要引用的,我就不多说了 ...
win10蓝牙已配对连接不上_win10蓝牙耳机显示已配对但没有声音的具体处理方法...
蓝牙耳机不仅使用起来相当方便,而且音质也不会差,所以很多用户都会首选.但近日有用户在win0电脑上使用时却遇到了,蓝牙耳机显示已配对但没有声音的情况,不知道怎么来解决,所以对此今天本文为大家整理分享的 ...
《MySQL安装流程详解》及《MySQL安装一直失败，重新安装显示已安装》
<MySQL安装流程详解>及<MySQL安装一直失败,重新安装显示已安装> 本文由博主经过查阅网上资料整理总结后编写,如存在错误或不恰当之处请留言以便更正,内容仅供大家参考学习 ...
经典案例重点案例：点名表，JS正则验证全选、全不选、反选，点击可以实现三个功能，轮播图字符串截取以及替换，图片切换
重点案例: 点击开始点名,框内的名字转动点击结束点名,框内的转动停止,并出现一个随机的学生姓名 <!DOCTYPE html> <html> <head> ...

js 分行显示已选爱好

js 分行显示已选爱好相关推荐

最新文章

热门文章