复选框图片

我试图与只图像的复选框列表的形式和复选框图片

我有这样的代码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

回答

相关问题