不幸的是,当我尝试将其与基于图像的复选框切换结合使用时,我正在使用 cookie 插件在多个页面“产品列表”中保留一个清单,我似乎无法让 ChangeBox(CheckBox) 方法正确触发。我究竟做错了什么?
标记:
<form name="CheckList" action="#">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img src="images/1.jpg" id="item1" name="checkboximg" alt="" onclick="swapImage('item1'); changeBox('pen1')" /></td>
<td onclick="swapImage('item1')"> item 1. </td>
</tr>
<tr>
<td><img src="images/1.jpg" id="item2" name="checkboximg" alt="" onclick="swapImage('item2')" /></td>
<td onclick="swapImage('item2')"> item 2. </td>
</tr>
<tr>
<td><img src="images/1.jpg" id="item3" name="checkboximg" alt="" onclick="swapImage('item3')" /></td>
<td onclick="swapImage('item3')"> item 3. </td>
</tr>
<tr>
<td><img src="images/1.jpg" id="item4" name="checkboximg" alt="" onclick="swapImage('item4')" /></td>
<td onclick="swapImage('item4')"> item 4. </td>
</tr>
</table>
<input type="checkbox" id="pen2" value="item1" class="hide" />
<input type="checkbox" id="pencil2" value="item2" class="hide" />
<input type="checkbox" id="paper2" value="item3" class="hide" />
<input type="checkbox" id="eraser2" value="item4" class="hide" />
</form>
Javascript:
//This Function Creates your Cookie for you just pass in the Cookie Name, Value, and number of days before you want it to expire.
function CreateCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
//This Function reads the value of a given cookie for you. Just pass in the cookie name and it will return the value.
function ReadCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
//This Function Erases Cookies. Just pass in the name of the cookies you want erased.
function EraseCookie(name) {
CreateCookie(name, "", -1);
}
//Sets or UnSets Cookies for given checkbox after it's been clicked on/off.
function ChangeBox(CheckBox) {
if (document.getElementById(CheckBox).checked) {
//var thisBox = document.getElementById(CheckBox).value;
//alert(thisBox);
var CurrentCookie = ReadCookie("productlist");
CurrentCookie = CurrentCookie + CheckBox;
CreateCookie("productlist", CurrentCookie, "1000");
}
else {
var CurrentCookie = ReadCookie("productlist");
CurrentCookie = CurrentCookie.replace(CheckBox, "");
CreateCookie("productlist", CurrentCookie, "1000");
}
}
//Runs on body load to check history of checkboxes on the page.
function CheckCookies() {
var CurrentCookie = ReadCookie("productlist");
for (i = 0; i < document.CheckList.elements.length; i++) {
if (document.CheckList.elements[i].type == "checkbox") {
document.CheckList.elements[i].onclick = function() {
ChangeBox(this.id);
};
if (CurrentCookie && CurrentCookie.indexOf(document.CheckList.elements[i].id) > -1) {
document.CheckList.elements[i].checked = true;
}
}
}
//IF COOKIE CHECKED
if (document.getElementById("pen2").checked == true) {
swapImage("item1");
}
if (document.getElementById("pencil2").checked == true) {
swapImage("item2");
}
if (document.getElementById("paper2").checked == true) {
swapImage("item3");
}
if (document.getElementById("eraser2").checked == true) {
swapImage("item4");
}
else {}
}
//Clears Form
function ClearBoxes() {
for (i = 0; i < document.CheckList.elements.length; i++) {
if (document.CheckList.elements[i].type == "checkbox") {
document.CheckList.elements[i].checked = false;
ChangeBox(document.CheckList.elements[i].id);
}
}
}
window.onload = CheckCookies;
//*********************************IMAGES*********************************//
var imgUp = "images/1.jpg";
var imgDown = "images/2.jpg";
var checkedItems = new Array();
function swapImage(imgID) {
var theImage = document.getElementById(imgID);
var theState = theImage.src;
//*****************CHANGE THE CORRECT CORRESPONDING CHECKBOX **************************//
var imgBox = document.getElementById(imgID).value;
//alert(imgBox);
alert(theImage);
if (theState.indexOf(imgUp) != -1) {
theImage.src = imgDown;
}
else {
theImage.src = imgUp;
}
}
CSS:
input.hide {/*display: none;*/}
你可以在这里看到 jsfiddle