动态生成复选框的多选处理与JSON数组及对象生成需求

Got it, let's break down how to solve this problem step by step. The goal is to pair dynamic checkboxes with their corresponding utterance text inputs, then generate a structured JSON object that includes each entry's utterance and its selected state (0 for unselected, 1 for selected).

Step 1: Set Up the HTML Structure #

First, we'll create a container for our dynamic entries, a submit button, and a place to display the resulting JSON. We'll also include a helper button to add new entries dynamically (since you mentioned checkboxes are generated dynamically):

<div id="entries-container">
  <!-- Dynamic entries will be added here -->
</div>
<button id="add-entry-btn">Add New Entry</button>
<button id="submit-btn">Submit Entries</button>
<pre id="json-result"></pre>

Step 2: JavaScript to Handle Dynamic Entries and Submission #

Next, we'll write the JS logic to add new entries, collect the data on submit, and format it into the required JSON:

// Add new dynamic entry (checkbox + utterance input)
document.getElementById('add-entry-btn').addEventListener('click', () => {
  const entryContainer = document.getElementById('entries-container');
  const newEntry = document.createElement('div');
  newEntry.classList.add('entry');
  
  newEntry.innerHTML = `
    <input type="checkbox" class="entry-checkbox">
    <input type="text" class="entry-utterance" placeholder="Enter your utterance here">
  `;
  
  entryContainer.appendChild(newEntry);
});

// Handle submission and generate JSON
document.getElementById('submit-btn').addEventListener('click', () => {
  const entries = document.querySelectorAll('.entry');
  const resultData = [];
  
  entries.forEach(entry => {
    const checkbox = entry.querySelector('.entry-checkbox');
    const utteranceInput = entry.querySelector('.entry-utterance');
    
    // Collect data: utterance text and selected state (0/1)
    const entryData = {
      utterance: utteranceInput.value.trim(),
      selected: checkbox.checked ? 1 : 0
    };
    
    // If you only want to include SELECTED entries in the final JSON, uncomment this:
    // if (entryData.selected === 1) {
      resultData.push(entryData);
    // }
  });
  
  // Convert the array to a formatted JSON string
  const finalJson = JSON.stringify({ entries: resultData }, null, 2);
  document.getElementById('json-result').textContent = finalJson;
});

How This Works #

• Dynamic Entry Creation: The "Add New Entry" button creates a new div with a checkbox and text input, all wrapped in a .entry class for easy selection.
• Data Collection: On submit, we loop through every .entry element, grab the checkbox state (converted to 0/1) and the utterance text.
• JSON Formatting: We assemble the data into an array of objects, then convert it to a pretty-printed JSON string. If you only need to include entries that are checked, just uncomment the if (entryData.selected === 1) condition.

Key Notes #

• Make sure all dynamic entries follow the same structure (.entry wrapper with .entry-checkbox and .entry-utterance classes) to avoid selection errors.
• If you need to handle entry deletion, you can add a delete button to each entry and update the submission logic accordingly—just ensure the DOM selection still targets valid entries.
• You can add validation (e.g., requiring utterance text for checked entries) by adding checks before pushing to resultData.

内容的提问来源于stack exchange，提问作者Kunal Mukherjee