如何将按钮中的值变为复选框

Question

我有这个功能，它创建一个具有特定值的按钮。在我的html表单中，我有一个复选框。我希望按钮中的值添加到复选框中。由于某种原因，我无法弄清楚..

var showDate = new Date();
        var months = ["Januari", "Februari", "March", "April", "May", "June","July", "Augusti", "September", "October", "November", "December"];
        var theForm = '<form class="" action="insert.php" method="post"><input id="day"type="checkbox" name="day" value=""><br><input id="btn" type="submit"  value="Send"></form>';

        function drawTable(forDate) {
          var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
          var cellsToDraw = daysInMonth;
          var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
          var xy = document.getElementById("x");
          xy.innerHTML = "";
          for (var r = 0; r < (daysInMonth / 7); r++) {
            var newRow = document.createElement("tr");
            xy.appendChild(newRow);
            for (var c = 0; c < 31 && cellsToDraw > 0; c++) {
              var day1 = ("0" + (c + 1)).slice(-2);
              var textarea = document.createElement("button");
              textarea.setAttribute("placeholder", day1 );
              textarea.setAttribute("class", "row");
              newRow.appendChild(textarea);
              textarea.setAttribute("name", "day");
              textarea.setAttribute("id", "day");
              textarea.setAttribute("day",  newdate + "-" + day1 );
              textarea.setAttribute("value", newdate + "-" + day1);
              textarea.innerHTML = day1; 
              var textarea1 = document.createElement("div");
              textarea1.setAttribute("class", "content");
              newRow.appendChild(textarea1);
              textarea1.innerHTML = theForm;
              cellsToDraw--;
            }
          }
          var acc = document.getElementsByClassName("row");
          var i;
          for (i = 0; i < acc.length; i++) {
            acc[i].addEventListener("click", function() {
            var content = this.nextElementSibling;
            var active = checkIfAnyVisible();
            if (active) {
              active.className = 'content';
              active.style.maxHeight = null;
            }
            if (content.style.maxHeight){
              content.style.maxHeight = null;
              content.className = 'content';
            } else if (!checkIfAnyVisible()) {
            content.style.maxHeight = content.scrollHeight + "px";
            content.style.width = "100%";
            content.className = 'content active';
            }
          });
        }
        function checkIfAnyVisible() {
          for (var i=0; i<acc.length; i++) {
            if (acc[i].nextElementSibling.className.includes('active')) {
              return acc[i].nextElementSibling;
            } else {
              continue;
            }
          }
          return false;
        }
    
      }

      window.onload = function() {
        document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()] + " " + showDate.getFullYear();
        drawTable(showDate);
      };

        function daysInMonth(month, year) {
          var days;
          switch (month) {
            case 1: 
            var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
            days = leapYear ? 29 : 28;
            break;
            case 3:
            case 5:
            case 8:
            case 10:
            days = 30;
            break;
            default:
            days = 31;
          }
          return days;
        }

    .row {
          transition: 0.4s;
          
        }
     
        .content {
          max-height: 0;
          transition: max-height 0.2s ease-out;
          overflow: hidden;
          width: 98.3%;
        }
        #x{
          width: 75%;
        }
   
      #displayingMonth {
      }
     
  

      <h1 id="displayingMonth"></h1><br>
      <div id="x" cellspacing="0" cellpadding="0"   border-collapse="collapse"></div>
    

Answer 1

要为复选框添加值，您可以使用简单的.value = myvalue。

而不是：textarea.setAttribute("value", newdate + "-" + day1);

使用此：
textarea.value = newdate + "-" + day1

但首先，请确保正确选择变量textarea。 我不知道你是否使用jQuery，但使用纯JS，你将选择你的复选框：
document.getElementById('day')

修改
你在使用ids时犯了一个错误的错误，你所做的就是为多个元素设置相同的ID，错误的是，ID必须是唯一的！ 所以我调整了这个。

代码：（在JS代码中查找注释）

var showDate = new Date();
var months = ["Januari", "Februari", "March", "April", "May", "June","July", "Augusti", "September", "October", "November", "December"];
var theForm = '<form class="" action="insert.php" method="post"><input type="checkbox" name="day" value=""><br><input id="btn" type="submit" value="Send"></form>';

function drawTable(forDate) {
  var daysInMonth = new Date(forDate.getFullYear(),forDate.getMonth()+1,0).getDate();
  var cellsToDraw = daysInMonth;
  var newdate = forDate.getFullYear() +"-"+ ("0"+ (forDate.getMonth() + 1)).slice(-2);
  var xy = document.getElementById("x");
  xy.innerHTML = "";
  for (var r = 0; r < (daysInMonth / 7); r++) {
    var newRow = document.createElement("tr");
    xy.appendChild(newRow);
    for (var c = 0; c < 31 && cellsToDraw > 0; c++) {

      //new function to get day
      var day1 = getCorrectDay(c);
      var textarea = document.createElement("button");
      textarea.setAttribute("placeholder", day1 );
      textarea.setAttribute("class", "row");
      newRow.appendChild(textarea);
      textarea.setAttribute("name", "day");

      //textarea.setAttribute("id", "day"); --> REMOVE THIS, ID must be unique
     
 textarea.setAttribute("day",  newdate + "-" + day1 );
      textarea.value = newdate + "-" + day1;
      textarea.innerHTML = day1; 
      var textarea1 = document.createElement("div");
      textarea1.setAttribute("class", "content");
      newRow.appendChild(textarea1);
      textarea1.innerHTML = theForm;

      //Lets find the checkbox
      var myCheckbox = textarea1.querySelector('input[type="checkbox"]');
      myCheckbox.value = newdate + "-" + day1; //setting the value
      console.log(myCheckbox); //Logging to see if value is there

      cellsToDraw--;
    }
  }
  var acc = document.getElementsByClassName("row");
  var i;
  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
    var content = this.nextElementSibling;
    var active = checkIfAnyVisible();
    if (active) {
      active.className = 'content';
      active.style.maxHeight = null;
    }
    if (content.style.maxHeight){
      content.style.maxHeight = null;
      content.className = 'content';
    } else if (!checkIfAnyVisible()) {
    content.style.maxHeight = content.scrollHeight + "px";
    content.style.width = "100%";
    content.className = 'content active';
    }
  });
}
function checkIfAnyVisible() {
  for (var i=0; i<acc.length; i++) {
    if (acc[i].nextElementSibling.className.includes('active')) {
      return acc[i].nextElementSibling;
    } else {
      continue;
    }
  }
  return false;
}

}

window.onload = function() {
document.getElementById("displayingMonth").innerHTML = months[showDate.getMonth()] + " " + showDate.getFullYear();
drawTable(showDate);
};

function daysInMonth(month, year) {
  var days;
  switch (month) {
    case 1: 
    var leapYear = ((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0);
    days = leapYear ? 29 : 28;
    break;
    case 3:
    case 5:
    case 8:
    case 10:
    days = 30;
    break;
    default:
    days = 31;
  }
  return days;
}


//Created a class to get the day based on each loop iteration
function getCorrectDay(idx){
  var day = (idx + 1).toString();
  if (day.length < 2){
    day = '0' + day;
  }
  return day;
}
     

.row {
      transition: 0.4s;

    }

    .content {
      max-height: 0;
      transition: max-height 0.2s ease-out;
      overflow: hidden;
      width: 98.3%;
    }
    #x{
      width: 75%;
    }

  #displayingMonth {
  }

<h1 id="displayingMonth"></h1><br>
<div id="x" cellspacing="0" cellpadding="0"   border-collapse="collapse"></div>