如何从按钮获取值到复选框

Question

I have this function where it creates a button with a certain value. In my html form I have a checkbox. I want the value from the buttons to be added in the checkbox. For some reason I am not able to figure it out..

 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

To add a value to a checkbox, you can use the simple .value = myvalue .

Instead of this:
textarea.setAttribute("value", newdate + "-" + day1);

Use this:
textarea.value = newdate + "-" + day1

but first, make sure that your variable textarea is beign correctly selected. I don't know if you are using jQuery, but with pure JS, you will select your checkbox with:
document.getElementById('day')

EDIT
you had a bad mistake with the ids , the way you were doing you were setting the same ID to many elements, what is wrong, IDs must be unique! So i adjusted this.

The code: ( look for comments inside the JS code )

 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>