Блог

Главная - Вопросы по программированию - Графический флажок JavaScript не отображается

Графический флажок JavaScript не отображается

#javascript #checkbox #graphics

#javascript #флажок #графика

Вопрос:

Второй флажок должен быть графическим флажком, но он не работает должным образом.

index.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>

checkbox.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

снят флажок.bmp: https://i.imgur.com/dhYKUjX.png

Ответ №1:

Это работает так, как ожидалось. У вас опечатка в 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>

Комментарии:

1. @iconwontload если бы это сработало, не могли бы вы отметить это как ответ, это галочка рядом с кнопками значков вверх / вниз.