创建一个选定单选按钮值的数组

Question

我有几个单选按钮：

<input type="radio" value="####.###/resources/videos/7.mp4">
<input type="radio" value="####.###/resources/videos/8.mp4">
<input type="radio" value="####.###/resources/videos/9.mp4">

如何制作包含所选值的数组，如下所示：

var videos = ["./resources/videos/7.mp4", 
             "./resources/videos/1.mp4", 
             "./resources/videos/2.mp4", 
             "./resources/videos/3.mp4"];

Answer 1

Onclick在数组中推送单选值

 var arr=[]; $('input').click(function(){ arr.push("."+$(this).val().split('####.###')[1]) console.log(arr); }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="radio" value="####.###/resources/videos/7.mp4">Video1 <input type="radio" value="####.###/resources/videos/8.mp4">Video2 <input type="radio" value="####.###/resources/videos/9.mp4">Video3 

Answer 2

我将添加一个change事件侦听器，以检查输入是否已选中或未选中，并将其添加或从列表中删除。

 var originalVideoList = ["./resources/videos/7.mp4", "./resources/videos/1.mp4", "./resources/videos/2.mp4", "./resources/videos/3.mp4" ]; var videos = document.querySelector("#videos"); var result = document.querySelector("#result"); var template = "<li><label for='{0}'>Video {1}</label><input id='{0}' type='checkbox' onchange='onChange()'/></li>"; var selectedArray = []; // Set up html videos.innerHTML = originalVideoList.map(function(video) { return template.replace(/\\{0\\}/g, video).replace(/\\{1\\}/g, video.split("/").pop()); }).join(""); // triggered on input change function onChange() { selectedArray = toArray(document.querySelectorAll("li>input:checked")).map(function(item) { return item.id.replace("####.###", "."); }); result.innerHTML = selectedArray.map(function(video) { return "<li>" + video + "</li>"; }).join(""); } // Same as [...input] function toArray(input) { var result = []; for (var index = 0; index < input.length; index++) result[index] = input[index]; return result; } 

 <ul id="videos"></ul> <ul id="result"></ul>