如何选中/取消选中复选框并在 textarea 中显示？

Question

The checked value appears in text area.

If I check more than two, I want to add the value to the newline. If I uncheck, I want to make the value disappear. If I check all, I want to add all values

I hope it works like the uploaded picture. Thanks for your help.

    <textarea rows="8" name="mobile" class="form-control" id="mobile" placeholder=""></textarea>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" id="customCheck1">
                <label class="custom-control-label" for="customCheck1" value="">all</label>
            </div>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" value="1" id="customCheck2">
                <label class="custom-control-label" for="customCheck2">1</label>
            </div>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input" value="2" id="customCheck3">
                <label class="custom-control-label" for="customCheck3">2</label>
            </div>
            <div class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input"  value="3" id="customCheck4">
                <label class="custom-control-label" for="customCheck4">3</label>
            </div>

                <script>
                    var radio = document.querySelectorAll(".custom-control-input");
                    var mobile = document.getElementById("mobile");
                    function checkBox(e){
                    mobile.value = e.target.value;
                    }
                    radio.forEach(check => {
                    check.addEventListener("click", checkBox);
                    });
                </script>

Answer 1

While it may sound like a bit of overkill, I would handle this with an Array or Object instead of trying to manage it in your textarea. I'd then make sure the textarea contains only the data in whatever you choose..

For example:

const selectedDataMap = {};
const radio = document.querySelectorAll(".custom-control-input");
const mobile = document.getElementById("mobile");

const checkBox = (e) => {
    if (!selectedDataMap[e.target.id]) {
        selectedDataMap[e.target.id] = true;
    }

    selectedDataMap[e.target.id] = e.target.checked;

    mobile.value = Object.keys(selectedDataMap).filter(id => { 
        const checkboxVal = document.querySelector(id).value || 'all';
        return selectedDataMap[id] === true ? checkboxVal : '';
    }).join("\n");
};

radio.forEach(check => check.addEventListener("click", checkBox));

DISCLAIMER: The above is untested. There are literally thousands of ways of improving upon this too. After all - it's only supposed to be an example.

The point though by doing this is because you can track/control what's in an array or object map a lot easier than trying to sort line-by-line through text and all that...

You could also expand your original solution too by creating a data object (something like: [{ id: 'customCheck1", value: "", label: "all", checked: false}...] ) and then print out all your checkboxes based on this object. You could then easily track your checked/unchecked by flipping the flag and then just printing out all the values in the text box. Like I said earlier though - literally thousands of ways to do this =]

Use whatever you think works best though! Good luck!

Answer 2

<script>
  var radio = document.querySelectorAll('.custom-control-input');
  var mobile = document.getElementById('mobile');

  function checkBox(e) {
    var str = mobile.value;

    if (e === undefined) return;

    if (e.target.value === 'on') return selectAll();

    if (str.includes(e.target.value))
      return (mobile.value = str
        .split('\n')
        .filter((n) => n.indexOf(e.target.value) == -1)
        .join('\n'));

    mobile.value = str + e.target.value + '\n';
  }

  function selectAll() {
    for (var i = 1; i < radio.length; i++) {
      radio[i].click();
    }
    checkBox();
  }

  radio.forEach((check) => {
    check.addEventListener('click', checkBox);
  });
</script>

Refs: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

Answer 3

• Wrap <form> around everything.
• Assign a class to the All checkbox and then a different one to the rest of the checkboxes to share. In the example below it's: .all and .chx .
• Add the event handler to the <form> so that any "change" events happen on or within <form> are captured.
• Design the event handler to react to only specific tags and ignore the rest. See event delegation .

---

The example stores an array of values and uses various Array methods to add, remove, and calculate the numbers within it. The details are commented in the example.

 // This is <form> const form = document.forms[0]; // Initialize all and sum let all = []; let sum = 0; // Define helper function const getSum = (x, y) => x + y; // Pass the event object const chxSum = event => { /* This is all form controls of <form> ie <textarea>, and all <input> */ const IO = event.currentTarget.elements; // This is the tag the user clicked const clicked = event.target; // This is the value of clicked as a real number let valNum = Number(clicked.value); // This is a NodeList of all.chx as an array const allChx = [...document.querySelectorAll('.chx')]; /* if the tag that the user clicked has class.chx... */ if (clicked.matches('.chx')) { /*...see if it's checked -- if it is then add it's value into the all array... */ if (clicked.checked) { all.push(valNum); //...otherwise remove the value from all array } else { all.splice(all.indexOf(valNum), 1); } /* But if the clicked tag has class.all... */ } else if (clicked.matches('.all')) { /*...see if it's clicked and if it is then check all of the.chx and reset the all array to [1,2,3]... */ if (clicked.checked) { allChx.forEach(chx => chx.checked = true); all.length = 0; all = [1, 2, 3]; /*...otherwise uncheck all.chx and empty the all array */ } else { allChx.forEach(chx => chx.checked = false); all.length = 0; } // end this function if clicked was anything else } else { return false; } // Get the sum of all values in all array sum = all.reduce(getSum, 0); // Display sum in <textarea> IO.mobile.value = sum; }; /* Add event handler on <form>. if any changes are detected on or within the <form> it will be captured */ form.onchange = chxSum;

 <,DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1: shrink-to-fit=no"> <link href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min:css" rel="stylesheet"> <style></style> </head> <body> <main class="container"> <section class="row"> <form class='col'> <textarea rows="8" name="mobile" class="form-control" id="mobile" placeholder=""></textarea> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input all" id="customCheck1"> <label class="custom-control-label" for="customCheck1">all</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input chx" value="1" id="customCheck2"> <label class="custom-control-label" for="customCheck2">1</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input chx" value="2" id="customCheck3"> <label class="custom-control-label" for="customCheck3">2</label> </div> <div class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input chx" value="3" id="customCheck4"> <label class="custom-control-label" for="customCheck4">3</label> </div> </form> </section> </main> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>