0
多个复选框的CSS样式我有使用火力，看起来像这样的应用程序：更改为无
勾选框，以每个“书”，点击后的右手边，发送火力对象转换成字符串的值，如下所示：
当点击这些勾选框，我想框和内容的风格改变，使他们变成蓝色。我加入这一段代码到上单击事件：
function select(data, book, key) {
//What I added
document.getElementById('selectBook').style.color="blue";
document.getElementById('selectBook').style.borderColor="blue";
//
var selectBookRef = book;
document.getElementById('alltext').value += selectBookRef + ',';
}然而，这仅仅打开第一盒蓝色。无论我点击哪一个复选框，第一个复选框变成蓝色，其余都保持灰色。
这里是JS代码创建复选框图标和JS突出选中的复选框。
function refreshUI(list) {
var lis = '';
var lis2 = '';
var lis3 = '';
//This generates the 3 columns on the application page
for (var i = 0; i < 10 && i < list.length; i++) {
lis += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
for (var i = 10; i < 20 && i < list.length; i++) {
lis2 += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
for (var i = 20; i < 30 && i < list.length; i++) {
lis3 += '<li style="width: 150px" data-key="' + list[i].key + '">' + list[i].book + genLinks(list[i].key, list[i].book) +'</li>';
};
document.getElementById('bookList').innerHTML = lis;
document.getElementById('bookList2').innerHTML = lis2;
document.getElementById('bookList3').innerHTML = lis3;
};
//This creates the 3 icons of delete, clear and select.
function genLinks(key, bkName) {
var links = '';
links += '<a href="javascript:del(\'' + key + '\',\'' + bkName + '\')"><i id="deleteBook" class="material-icons">delete</i></a> ';
links += '<a href="javascript:remove(\'' + key + '\',\'' + bkName + '\')"><i id="removeBook" class="material-icons">clear</i></a> ';
links += '<a href="javascript:select(\'' + key + '\',\'' + bkName + '\')"><i id="selectBook" onclick="functionSelected()" class="material-icons">check</i></a>';
return links;
};
function del(key, bkName) {
var deleteBookRef = buildEndPoint(key);
deleteBookRef.remove();
}
//This is the function to select and insert the data into the string as well as highlight each checkbox
function select(data, book, key) {
document.getElementById('selectBook').style.color="blue";
document.getElementById('selectBook').style.borderColor="blue";
var selectBookRef = book;
document.getElementById('alltext').value += selectBookRef + ',';
}
function buildEndPoint (key) {
return new Firebase('https://project04-167712.firebaseio.com/books/' + key);
}
bookList.on("value", function(snapshot) {
var data = snapshot.val();
var list = [];
for (var key in data) {
if (data.hasOwnProperty(key)) {
book = data[key].book ? data[key].book : '';
if (book.trim().length > 0) {
list.push({
book: book,
key: key
})
}
}
}
refreshUI(list);
});如果有人能帮助将非常感激。
感谢， 摹
你需要使用一个类，而不是一个ID。一个ID在页面上必须是唯一的。因此它总是选择第一个。 – Gerard
[使用类和'getElementsByClassName'，然后通过所有比赛环]（https://stackoverflow.com/questions/15843581/how-to-correctly-iterate-through-getelementsbyclassname） – Blazemonger