方法一
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.ul-contiener{
width: 500px;
margin: 0 auto;
}
.question-container{
display: flex;
justify-content: space-between;
margin-top: 10px;
}
</style>
</head>
<body>
<ul class="ul-contiener"></ul>
<div style="text-align: center;margin-top: 20px;">
<button>打印结果</button>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
// 初始数据
let data = [
{
itemName: "1.我觉得闷闷不乐,情绪低落",
scoreInfo: [
{scoreName: "偶有", score: 1},
{scoreName: "有时", score: 2},
{scoreName: "经常", score: 3},
{scoreName: "持续", score: 4},
]
},
{
itemName: "2.我觉得一天中早晨最好",
scoreInfo: [
{scoreName: "偶有", score: 1},
{scoreName: "有时", score: 2},
{scoreName: "经常", score: 3},
{scoreName: "持续", score: 4},
]
},
{
itemName: "3.我晚上一阵阵哭出来,或者想哭",
scoreInfo: [
{scoreName: "偶有", score: 1},
{scoreName: "有时", score: 2},
{scoreName: "经常", score: 3},
{scoreName: "持续", score: 4},
]
},
{
itemName: "3.我晚上睡眠不好",
scoreInfo: [
{scoreName: "偶有", score: 1},
{scoreName: "有时", score: 2},
{scoreName: "经常", score: 3},
{scoreName: "持续", score: 4},
]
}
]
//渲染数据 => 这里不需要看
render();
function render() {
data.forEach(item => {
let str = `<li class="question-container">
<div>${item.itemName}</div>
<div>
<label>
<input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[0].score}">
<span>${item.scoreInfo[0].scoreName}</span>
</label>
<label>
<input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[1].score}">
<span>${item.scoreInfo[1].scoreName}</span>
</label>
<label>
<input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[2].score}">
<span>${item.scoreInfo[2].scoreName}</span>
</label>
<label>
<input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[3].score}">
<span>${item.scoreInfo[3].scoreName}</span>
</label>
</div>
</li>`
$(".ul-contiener").append(str);
})
}
// 给 type="radio" 绑定mousedown mousedown表示的鼠标按下还没有抬起的事件
let flag; //radio点击之前的状态 用来判断是否选中
$("label").on("mousedown",function(){
flag = $(this).find("input").prop("checked");
console.log(flag);
});
//当radio被选中是点击 去掉 选中状态
$("label").on("click",function(){
if(flag){
$(this).find("input").prop("checked",false);
}
});
//点击打印结果
$("button").on("click",function(){
let checkedRadio = $('input:radio:checked');
console.log(checkedRadio,"checkedRadio");
console.log(checkedRadio.length,"checkedRadio");
console.log(data.length,"data");
let resultArray = []
for(let i=0;i<checkedRadio.length;i++){
resultArray.push({
itemName: $(checkedRadio[i]).attr("name"),
score: $(checkedRadio[i]).attr("data-score")
})
}
console.log(resultArray)
})
})
</script>
</body>
</html>
方法2用原生的js
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.ul-contiener{
width: 500px;
margin: 0 auto;
}
.question-container{
display: flex;
justify-content: space-between;
margin-top: 10px;
}
</style>
</head>
<body>
<ul class="ul-contiener"></ul>
<div style="text-align: center;margin-top: 20px;">
<button>打印结果</button>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
$(function(){
// 初始数据
let data = [
{
itemName: "1.我觉得闷闷不乐,情绪低落",
scoreInfo: [
{scoreName: "偶有", score: 1},
{scoreName: "有时", score: 2},
{scoreName: "经常", score: 3},
{scoreName: "持续", score: 4},
]
},
{
itemName: "2.我觉得一天中早晨最好",
scoreInfo: [
{scoreName: "偶有", score: 1},
{scoreName: "有时", score: 2},
{scoreName: "经常", score: 3},
{scoreName: "持续", score: 4},
]
},
{
itemName: "3.我晚上一阵阵哭出来,或者想哭",
scoreInfo: [
{scoreName: "偶有", score: 1},
{scoreName: "有时", score: 2},
{scoreName: "经常", score: 3},
{scoreName: "持续", score: 4},
]
},
{
itemName: "3.我晚上睡眠不好",
scoreInfo: [
{scoreName: "偶有", score: 1},
{scoreName: "有时", score: 2},
{scoreName: "经常", score: 3},
{scoreName: "持续", score: 4},
]
}
]
//渲染数据
render();
function render() {
data.forEach(item => {
let str = `<li class="question-container">
<div>${item.itemName}</div>
<div>
<label>
<input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[0].score}">
<span>${item.scoreInfo[0].scoreName}</span>
</label>
<label>
<input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[1].score}">
<span>${item.scoreInfo[1].scoreName}</span>
</label>
<label>
<input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[2].score}">
<span>${item.scoreInfo[2].scoreName}</span>
</label>
<label>
<input type="radio" name="${item.itemName}" data-score="${item.scoreInfo[3].score}">
<span>${item.scoreInfo[3].scoreName}</span>
</label>
</div>
</li>`
$(".ul-contiener").append(str);
})
}
// 给 type="radio" 绑定mousedown mousedown表示的鼠标按下还没有抬起的事件
let flag; //radio点击之前的状态 用来判断是否选中
let choose = document.querySelectorAll("label")
for(let i=0;i<choose.length;i++){
choose[i].addEventListener("mousedown",function(){
flag = this.childNodes[1].checked;
});
//当radio被选中是点击 去掉 选中状态
choose[i].addEventListener("click",function(){
if(flag){
this.childNodes[1].checked = false;
}
});
}
//点击打印结果
let btn = document.querySelector("button");
btn.addEventListener("click",function(){
let checkedRadio = document.querySelectorAll('[type="radio"]');
let resultArray = [];
for(let i=0;i<checkedRadio.length;i++){
if(checkedRadio[i].checked){
resultArray.push({
itemName: checkedRadio[i].getAttribute ("name"),
score: checkedRadio[i].getAttribute ("data-score")
})
}
}
console.log(resultArray)
});
})
</script>
</body>
</html>
编辑默认选中、
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
let data = [{"itemName":"1.我觉得闷闷不乐 ,情绪低沉","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 2.我觉得一天之中早晨最好","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"3.我一阵阵哭出来或想哭","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"4.我晚上睡眠不好","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 5.我吃的跟平常一样多","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 6.我与异性接触时和以往一样感到愉快","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"7.我发觉我的体重在下降","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"8.我有便秘的苦恼","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"9.我心跳比平时快","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"10.我无缘无故地感到疲乏","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 11.我的脑袋跟平常一样清楚","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 12.我觉得经常做的事情并没困难","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"13.我觉得不安而平静不下来","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 14.我对将来抱有希望","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"15.我比平常容易生气激动","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 16.我觉得做出决定是容易的","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 17.我觉得自己是个有用的人,有人需要我","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"* 18.我的生活过的很有意思","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]},{"itemName":"19.我认为如果我死了别人会生活地更好些","scoreInfo":[{"scoreName":"偶有","score":1},{"scoreName":"有时","score":2},{"scoreName":"经常","score":3},{"scoreName":"持续","score":4}]},{"itemName":"* 20.平常感兴趣的事我仍然照样感兴趣","scoreInfo":[{"scoreName":"偶有","score":4},{"scoreName":"有时","score":3},{"scoreName":"经常","score":2},{"scoreName":"持续","score":1}]}]
let backData = [{"itemName":"1.我觉得闷闷不乐 ,情绪低沉","score":"1"},{"itemName":"* 2.我觉得一天之中早晨最好","score":"3"},{"itemName":"3.我一阵阵哭出来或想哭","score":"3"},{"itemName":"4.我晚上睡眠不好","score":"3"},{"itemName":"* 5.我吃的跟平常一样多","score":"3"},{"itemName":"* 6.我与异性接触时和以往一样感到愉快","score":"2"},{"itemName":"7.我发觉我的体重在下降","score":"3"},{"itemName":"8.我有便秘的苦恼","score":"3"},{"itemName":"9.我心跳比平时快","score":"3"},{"itemName":"10.我无缘无故地感到疲乏","score":"3"},{"itemName":"* 11.我的脑袋跟平常一样清楚","score":"2"},{"itemName":"* 12.我觉得经常做的事情并没困难","score":"2"},{"itemName":"13.我觉得不安而平静不下来","score":"3"},{"itemName":"* 14.我对将来抱有希望","score":"1"},{"itemName":"15.我比平常容易生气激动","score":"4"},{"itemName":"* 16.我觉得做出决定是容易的","score":"2"},{"itemName":"* 17.我觉得自己是个有用的人,有人需要我","score":"1"},{"itemName":"* 18.我的生活过的很有意思","score":"2"},{"itemName":"19.我认为如果我死了别人会生活地更好些","score":"4"},{"itemName":"* 20.平常感兴趣的事我仍然照样感兴趣","score":"1"}]
for(let i=0; i<data.length; i++){
for(let k=0; k<data[i].scoreInfo.length; k++){
if(data[i].scoreInfo[k].score === Number(backData[i].score)){
data[i].scoreInfo[k].isChecked = true;
}else{
data[i].scoreInfo[k].isChecked = false;
}
}
}
console.log("backData",backData);
console.log("data",data);
</script>
</body>
</html>