複選框圖片

我試圖與只圖像的複選框列表的形式和複選框圖片

我有這樣的代碼add an image to a html type input check box or radio：

<html> 
 
<script type="text/javascript"> 
 
    //global variables that can be used by ALL the function son this page. 
 
    var inputs; 
 
    var imgFalse = '52 0 ROff.png'; 
 
    var imgTrue = '52 0 ROn.png'; 
 

 
    //replace the checkbox with an image and setup events to handle it 
 
    function replaceChecks() { 
 
     //get all the input fields on the page 
 
     inputs = document.getElementsByTagName('input'); 
 

 
     //cycle trough the input fields 
 
     for(var i=0; i<inputs.length; i++) { 
 

 
      //check if the input is a checkbox 
 
      if(inputs[i].getAttribute('type') == 'checkbox') { 
 

 
       //create a new image 
 
       var img = document.createElement('img'); 
 

 
       //check if the checkbox is checked 
 
       if(inputs[i].checked) { 
 
        img.src = imgTrue; 
 
       } else { 
 
        img.src = imgFalse; 
 
       } 
 

 
       //set image ID and onclick action 
 
       img.id = 'checkImage'+i; 
 
       //set image 
 
       img.onclick = new Function('checkClick('+i+')'); 
 

 
       //place image in front of the checkbox 
 
       inputs[i].parentNode.insertBefore(img, inputs[i]); 
 

 
       //hide the checkbox 
 
       inputs[i].style.display='none'; 
 
      } 
 
     } 
 
    } 
 

 
    //change the checkbox status and the replacement image 
 
    function checkClick(i) { 
 
     if(inputs[i].checked) { 
 
      inputs[i].checked = ''; 
 
      document.getElementById('checkImage'+i).src=getImageUnchecked(i); 
 
     } else { 
 
      inputs[i].checked = 'checked'; 
 
      document.getElementById('checkImage'+i).src=getImageChecked(i); 
 
     } 
 
    } 
 

 
    function getImageChecked(input) { 
 
     if (input == 0) 
 
      return "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.jpg"; 
 
     if (input == 1) 
 
      return "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.jpg"; 
 
    } 
 

 
    function getImageUnchecked(input) { 
 
     if (input == 0) 
 
      return "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.png"; 
 
     if (input == 1) 
 
      return "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.png"; 
 
    } 
 

 
    function startImages() { 
 

 
    } 
 

 
</script> 
 
</html> 
 
<head> 
 
</head> 
 
<body> 
 
<input type="checkbox" id="option1" checked/> Test<br> 
 
<input type="checkbox" id="option2" checked/> two<br> 
 
<button onclick="alert('option 1 is checked? ' + document.getElementById('option1').checked 
 
+ 'option 2 is checked? ' + document.getElementById('option2').checked)">Check</button> 
 
<script type="text/javascript">replaceChecks();</script> 
 
</body>

但僅適用於圖像啓動後顯示第一次點擊。是否有任何解決辦法可以從頁面加載開始？我嘗試了現有的功能，但什麼都沒有實現。

來源

2017-08-04 Igor Silveira

除非你希望你的HTML有一些點（可能性很小），則可以省略最後斜槓在您的元素被解析爲XML（''可以只是' '）。沿着同樣的路線，您不再需要在腳本標記中指定'type =「text/javascript」'。 –

您有不需要的編碼巨大量並設置初始圖像值到不存在的圖像。

此外，您的HTML無效（<html>結束標記必須是文檔中的最後一個東西）。

此外，you should not use inline HTML event attributes（onclick等），而是完全分離您的JavaScript從您的HTML和遵循現代，基於標準的編碼實踐。另外，除非你希望你的HTML必須在某些時候被解析爲XML（極不可能），你可以省略元素中的最後一個斜槓（<input ... />可以只是<input ... >）。沿着相同的路線，您不再需要在腳本標記中指定type="text/javascript"。

下面是你的代碼清理和現代化的工作版本。注意實際上代碼少得多（沒有評論，代碼非常少），代碼簡單多少。請查看代碼中的註釋，瞭解有關正在進行的操作和原因的詳細信息。

.hidden { display:none; }

<html> 
 
    <head> 
 
    <title>Checkbox and Images</title> 
 
    </head> 
 
    <body> 
 
    <input type="checkbox" id="option1" checked> Test<br> 
 
    <input type="checkbox" id="option2" checked> two<br> 
 
    <button id="btnOutput">Check</button> 
 
    
 
    <script> 
 
     // You should never make global variables as they can collide with other variables 
 
     // Instead, create a "scope" of your own to work in with an Immediately Invoked 
 
     // function expression (an unnamed function that invokes itself right after being 
 
     // declared) 
 
     (function(){ 
 
     // Anything declared inside this function is not accessible outside of it 
 
     
 
     // Since we know these are the only two image paths needed, we can set them up as 
 
     // variables and completely do away with the extra functions that set them. 
 
     var imgFalse = "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.png"; 
 
     var imgTrue = "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.jpg"; 
 
    
 
     // Get references to all the DOM elements you will need and then you don't 
 
     // have to scan for them again over and over. 
 
     var btnOutput = document.getElementById("btnOutput"); 
 
     
 
     // .getElementsByTagName() returns a "live node" list that causes the DOM 
 
     // to be re-scanned for the elements everytime you reference the list. 
 
     // Use .querySelectorAll() for better efficiency and turn the node list that 
 
     // returns into a proper JavaScript array so that .forEach() can be used to 
 
     // iterate the elements later. 
 
     var checkboxes = 
 
      Array.prototype.slice.call(document.querySelectorAll('input[type="checkbox"]'));  
 
      
 
     // Set up the click event handling function for the button 
 
     btnOutput.addEventListener("click", function(){ 
 
      alert('option 1 is checked? ' + checkboxes[0].checked + 
 
       'option 2 is checked? ' + checkboxes[1].checked); 
 
     }); 
 

 
     // Loop through the checkboxes array 
 
     checkboxes.forEach(function(checkbox, index){ 
 
     
 
      // No need to test the input type because this array only contains checkboxes 
 
      
 
      // create a new image 
 
      var img = document.createElement('img'); 
 

 
      // Show the right image based on the checked status of the clicked checkbox 
 
      if(checkbox.checked) { 
 
      img.src = imgTrue; 
 
      } else { 
 
      img.src = imgFalse; 
 
      } 
 

 
      img.id = 'checkImage' + index; // set image ID 
 
      img.checked = false; 
 
      
 
      // Set up image click event handler 
 
      img.addEventListener("click", function(){ 
 
      
 
      // Toggle the checked state of the image. 
 
      // In JavaScript, the "checked" property is boolean. It has values of true and false, 
 
      // not "checked" and "" (those are the values to use in HTML attributes). 
 
      this.checked = !this.checked; 
 
      
 
      if(this.checked) { 
 
       img.src= "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.png"; 
 
      } else { 
 
       img.src= "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.jpg"; 
 
      } 
 
      
 
      }); 
 

 
      // place image just prior to the checkbox in the DOM 
 
      checkbox.parentNode.insertBefore(img, checkbox); 
 

 
      // Hide the checkbox. Use CSS classes instead of inline styles 
 
      checkbox.classList.add("hidden"); 
 
     }); 
 
     })(); 
 
    
 
    </script> 
 
</body> 
 
</html>

來源

2017-08-04 18:56:22

您已附加checkClick()單擊圖像事件，但您從未實際上最初加載圖像，因此您必須從for循環調用checkClick(i)。

<html> 
 
<script type="text/javascript"> 
 
    //global variables that can be used by ALL the function son this page. 
 
    var inputs; 
 
    var imgFalse = '52 0 ROff.png'; 
 
    var imgTrue = '52 0 ROn.png'; 
 

 
    //replace the checkbox with an image and setup events to handle it 
 
    function replaceChecks() { 
 
     //get all the input fields on the page 
 
     inputs = document.getElementsByTagName('input'); 
 

 
     //cycle trough the input fields 
 
     for(var i=0; i<inputs.length; i++) { 
 

 
      //check if the input is a checkbox 
 
      if(inputs[i].getAttribute('type') == 'checkbox') { 
 

 
       //create a new image 
 
       var img = document.createElement('img'); 
 

 
       //check if the checkbox is checked 
 
       if(inputs[i].checked) { 
 
        img.src = imgTrue; 
 
       } else { 
 
        img.src = imgFalse; 
 
       } 
 
       //set image ID and onclick action 
 
       img.id = 'checkImage'+i; 
 
       //set image 
 
       img.onclick = new Function('checkClick('+i+')'); 
 

 
       //place image in front of the checkbox 
 
       inputs[i].parentNode.insertBefore(img, inputs[i]); 
 

 
       //hide the checkbox 
 
       inputs[i].style.display='none'; 
 
       checkClick(i); 
 
      } 
 
     } 
 
    } 
 

 
    //change the checkbox status and the replacement image 
 
    function checkClick(i) { 
 
     if(inputs[i].checked) { 
 
      inputs[i].checked = ''; 
 
      document.getElementById('checkImage'+i).src=getImageUnchecked(i); 
 
     } else { 
 
      inputs[i].checked = 'checked'; 
 
      document.getElementById('checkImage'+i).src=getImageChecked(i); 
 
     } 
 
    } 
 

 
    function getImageChecked(input) { 
 
     if (input == 0) 
 
      return "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.jpg"; 
 
     if (input == 1) 
 
      return "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.jpg"; 
 
    } 
 

 
    function getImageUnchecked(input) { 
 
     if (input == 0) 
 
      return "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.png"; 
 
     if (input == 1) 
 
      return "https://azooree.com/wp-content/uploads/2017/08/Logomakr_6HaICv.png"; 
 
    } 
 

 
    function startImages() { 
 

 
    } 
 
</script> 
 
</html> 
 
<head> 
 
</head> 
 
<body> 
 
<input type="checkbox" id="option1" checked/> Test<br> 
 
<input type="checkbox" id="option2" checked/> two<br> 
 
<button onclick="alert('option 1 is checked? ' + document.getElementById('option1').checked 
 
+ 'option 2 is checked? ' + document.getElementById('option2').checked)">Check</button> 
 
<script type="text/javascript">replaceChecks();</script> 
 
</body>

來源

2017-08-04 18:02:35 Dij

回答

相關問題