我如何通过Ajax发送所选复选框的值

Question

I am getting data from a backend server, and I would like to know how I can send the value of the questionid if the checkbox is clicked.

function renderHTML(data) {
  var htmlString = "";  
  for (i = 0; i < data.length; i++) {
    htmlString += "<p><input type='checkbox' id='checks' value='" + data[i] + "'/>" +
      data[i].questionid + "." + "\n;
    htmlString += '</p>';
  }
  response.insertAdjacentHTML('beforeend', htmlString);
  document.getElementById('checks').onclick = function() {
    if (this.checked) {
      var xhr = new XMLHttpRequest();
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          var Data = xhr.responseText;
          var parseData = JSON.parse(Data);
          console.log(parseData);
        }
      };
      xhr.open("POST", "URL", true);
      xhr.send(JSON.stringify(data));
    }
  };
}

Answer 1

I suggest you use name instead id

id='checks' => name='checks' And define fuction like this link

Answer 2

The basic idea of what you're asking is doable, see the code snippet below. Instead of logging the result, you can replace that with whatever AJAX call you need to do.

Note: One of the big issues in your code (aside from the quotation-related syntax error), is that you're trying to assign id="checks" to multiple HTML elements, which you can't do. When you do this, generally your onclick event will work for the first element, but not the rest. Instead, use classes , or, use the querySelector like I have below.

 var checkboxes = document.querySelectorAll('input[type="checkbox"]'); for (var i=0; i < checkboxes.length; i++) { checkboxes[i].onclick = function() { if (this.checked) { console.log(this.value + ' is checked!'); } } } 

 <input type="checkbox" value="checkbox 1" /> <input type="checkbox" value="checkbox 2" /> <input type="checkbox" value="checkbox 3" />