觸發一個複選框點擊從圖片點擊一個cookie插件

Question

我使用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 here

Answer 1

最簡單的方式進行排序，這是從swapImage功能內傳遞多個參數調用你CheckBox功能。這裏有一個例子：

function swapImage(imgID, checkboxID) { 
    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; 
    } 

    /* CALL THE CHANGEBOX FUNCTION */ 
    ChangeBox(checkboxID); 
} 

，正如拋開你也可能會更容易/清潔劑使用CSS風格切換的，而不是改變image.src的。你有沒有想過使用背景圖片的類而不是？這裏有一個例子：

/* CHANGE CLASSES + UPDATE COOKIE - Function formerly called "swapImage" */ 
function setChecked(divID, checkboxID, updateCookie){ 
    var theDiv = document.getElementById(divID); 
    var theCheckbox = document.getElementById(checkboxID); 

    // Toggle Classes/Checkboxes 
    if(theDiv.className == "img1"){ 
     theDiv.className = "img2"; 
     theCheckbox.checked = true; 
    }else{ 
     theDiv.className = "img1"; 
     theCheckbox.checked = false; 
    } 

    // If updateCookie is true change cookie 
    if(updateCookie){ 
     ChangeBox(checkboxID); 
    } 
} 

在這裏，您可能會注意到我還添加了兩件事情： - 布爾參數updateCookie讓您選擇更新的cookie或不 - 正確的複選框Immeadiate檢查

這是a working example on jsfiddle。就像我一樣，我一定會提倡使用jQuery來進行這種編碼，因爲它確實可以通過使用CSS選擇器來快速編碼，defo check it out here。我希望這有助於！