Display the value of selected checkbox

hi all i have some problem about displaying the value of selected checkbox in text area

here is my code :

<html>
    <style>
        label { 
            display: block; 
        }
    </style>
    <body>
        <form name="form1" method="post">
        <textarea name="type" rows="5" cols="35"></textarea>
            <label><input type="checkbox" name="mis1" id="id1" value="Show1">1</label>
            <label><input type="checkbox" name="mis2" id="id2" value="Show2">2</label>
            <label><input type="checkbox" name="mis6" id="id3" value="Show3">3</label>
            <label><input type="checkbox" name="mis6" id="id4" value="Show4">4</label>
        </form>
    </body>
        <script>
            var val=0,
            form = document.forms.form1,
            text = form1.elements.type;
            text.addEventListener('focus', text.select.bind(text));
            form.addEventListener('change', 
            function(e) {
            if(e.target.type == 'checkbox') {
            val += e.target.value ;
            text.value = val;
            }
            });
        </script>
    </html>

i want it to display like this

Or u can give me simpler way of displaying the selected checkbox value …

<label><input type="checkbox" name="mis1" id="id1" value="Show1">show1</label>

i want the output to look like this not the label

We need to understand what you are wanting.

Are you wanting the checkbox that you’ve just clicked on to be shown, regardless of whether that checks or unchecks the checkbox?
Or are you wanting the equivalent of a live update of all the checked checkboxes?

The first choice is an activity log, the second choice is a status update. Which do you want?

If it is the status log, all you need to do is to add \n on to the end of the value.

form.addEventListener("change", function (e) {
    if (e.target.type === "checkbox") {
        text.value += e.target.value + "\n";
    }
});

If however you want a status update, you will need to loop through each checkbox whenever a change occurs.

form.addEventListener("change", function (e) {
    var checkboxes = form.querySelectorAll("[type='checkbox']");
    text.value = "";
    Array.from(checkboxes).forEach(function (checkbox) {
        if (checkbox.checked) {
            text.value += checkbox.value + "\n";
        }
    });
});
1 Like

ok now im understand sir , tq so much …

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.