时间戳

首页 > 解决方案 > JavaScript 图形复选框不显示

javascript - JavaScript 图形复选框不显示

问题描述

第二个复选框应该是一个图形复选框，但它不能正常工作。

索引.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Graphic Checkboxes</title>
        <meta name="viewport"
            content="width=device-width initial-scale=1">
    </head>
    <h1>Graphic Checkbox Example</h1>
    <form name="form1">
        <p>
            <input type="checkbox" name="check1" id="check1">
            An ordinary checkbox.  
        </p>
        <p>
            <input type="checkbox" name="check2" id="check2">
            A graphic checkbox, created with unobtrusive JavaScript.  
        </p>
    </form>

    <script src="checkbox.js"></script>
</html>

复选框.js

function graphicBox(box) {
    // Be unobtrusive.  
    if (!document.getElementById) {
        return;
    }

    // Find the object and its parent.  
    obj = document.getElemementById(box);
    parentobj = obj.parentNode;

    // Hide the regular checkbox.  
    obj.style.display = "none";

    // Create the image element and set its onclick event.  
    img = document.createElement("img");
    img.addEventListener("click", Toggle);
    img.src = "images/unchecked.bmp";

    // Save the checkbox ID within the image ID.  
    img.id = "img" + box;

    // Display the graphic checkbox.  
    parentobj.insertBefore(img, obj);
}

function Toggle(e) {
    if (!e) { 
        var e = window.event;
    }

    // Find the image ID.  
    img = (e.target) ? e.target : e.srcElement;

    // Find the checkbox by remoiving "img" from the image ID.  
    checkid = img.id.substring(3);
    checkbox = document.getElementById(checkid);

    // "click" the checkbox.  
    checkbox.click();

    // Display the right image for the clicked or unclicked state.  
    if (checkbox.checked) {
        file = "images/checked.bmp";
    }
    else {
        file = "images/unchecked.bmp";
    }

    img.src = file;
}

graphicBox("check2");

路径： https ://i.imgur.com/xQITWQK.png

结果： https ://i.imgur.com/x4O1CaD.png

如您所见，复选框没有图形。

这些是我的复选框图形图像：checked.bmp 和 unchecked.bmp。

检查.bmp： https ://i.imgur.com/HH8ukjZ.png

unchecked.bmp： https ://i.imgur.com/dhYKUjX.png

标签： javascriptcheckboxgraphics

解决方案

这按预期工作。graphicBox您在函数中有错字：

// Find the object and its parent.  
obj = document.getElemementById(box);

应该

// Find the object and its parent.  
obj = document.getElementById(box);


var uncheckedImage = "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/X_mark.svg/23px-X_mark.svg.png";
var checkedImage = "https://upload.wikimedia.org/wikipedia/en/thumb/f/fb/Yes_check.svg/23px-Yes_check.svg.png";


function graphicBox(box) {
  // Be unobtrusive.  
  if (!document.getElementById) {
    return;
  }

  // Find the object and its parent.  
  obj = document.getElementById(box);
  parentobj = obj.parentNode;

  // Hide the regular checkbox.  
  obj.style.display = "none";

  // Create the image element and set its onclick event.  
  img = document.createElement("img");
  img.addEventListener("click", Toggle);
  img.src = uncheckedImage;

  // Save the checkbox ID within the image ID.  
  img.id = "img" + box;

  // Display the graphic checkbox.  
  parentobj.insertBefore(img, obj);
}

function Toggle(e) {
  if (!e) {
    var e = window.event;
  }

  // Find the image ID.  
  img = (e.target) ? e.target : e.srcElement;

  // Find the checkbox by remoiving "img" from the image ID.  
  checkid = img.id.substring(3);
  checkbox = document.getElementById(checkid);

  // "click" the checkbox.  
  checkbox.click();

  // Display the right image for the clicked or unclicked state.  
  if (checkbox.checked) {
    file = checkedImage;
  } else {
    file = uncheckedImage;
  }

  img.src = file;
}

graphicBox("check2");
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Graphic Checkboxes</title>
  <meta name="viewport" content="width=device-width initial-scale=1">
</head>
<h1>Graphic Checkbox Example</h1>
<form name="form1">
  <p>
    <input type="checkbox" name="check1" id="check1"> An ordinary checkbox.
  </p>
  <p>
    <input type="checkbox" name="check2" id="check2"> A graphic checkbox, created with unobtrusive JavaScript.
  </p>
</form>
</html>

推荐阅读