Remove span added with checkbox

Asked

Viewed 77 times

-2

I have input in html

<input value ="Get" onClick={GetSelected} type="checkbox" value="SLA contratual" />

when clicked a span is added to a list

<li id="teste"></li>

I need to remove if clicked on the input again, but I’m not getting it. Follow the script

function GetSelected() {
        var selected = new Array();
        var p = document.getElementById("teste");
        var portfolio = document.getElementById("section");
        var chks = portfolio.getElementsByTagName("INPUT");
        var span = document.createElement("span");

        for (var i =  0; i < chks.length; i++ ) {
            if (chks[i].checked) {
                selected.push(chks[i].value);
            }
        };

        if (selected.length > 0) {
            console.log("Você selecionou: " + selected.join(", "));
            span.innerHTML = selected.join(", "); 
            p.appendChild(span);
        }

    };

javascript html react input checkbox

  • It’s just an input checkbox or multiple?

  • are several, each within a list

2 answers

2


Hello,

if you do not need to add to an array, you add directly to the list and delete by the element id as shown below:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <input class="chbSelect" name="options" type="radio" value="Option 1" id="database_id_1">Option 1</input></br>
    <input class="chbSelect" name="options" type="radio" value="Option 2" id="database_id_2">Option 2</input></br>
    <input class="chbSelect" name="options" type="radio" value="Option 3" id="database_id_3">Option 3</input></br>

    <ul id="my-list">
    <ul>

    <script>
        $('.chbSelect').on('click', () => GetSelected() );

        function GetSelected() {
            $('#my-list li').remove();
            if (event.target.checked) {
                let $i = document.createElement('li');
                $i.id = 'li_' + event.target.id;
                $i.appendChild(document.createTextNode(event.target.value));
                document.querySelector('#my-list').appendChild($i);
            }
        }
    </script>
</body>
</html>

  • It worked perfectly, thank you very much. Just a question, in case you want to limit to just select a checkbox, how would it look?

  • Instead of checkbox you can switch to radio and then everyone has to have the same tag "name", with this, the component itself will not allow the user to select more than one. , another thing that can be done is to place the line $('#my-list li'). removes(); in the Getselected method, in the first line, you can boot Else from if out.. But if you will only display a value, is it necessary to use a list? Another thing, if you can only select a value, the checkbox or radio cannot be replaced by a select (combobox)? If in doubt let me know that I adjust the code for you to understand.

  • I tested with the radio but when selected and clicking again it is added in the list. The combobox does not apply pq are different categories where the user can choose.

  • Hello, I edited the answer code, please check if this is what you need.

  • As a use, the ideal would be javascript instead of jquery, but in the first attempt I modified and it worked, but with the edition I could not make the code work

0

I’m not sure I understand, but if you want to insert and remove one span in a li according to the checkboxes marked, just use a else in the if within the for and use .removeChild().

When browsing the checkbox list and what is not checked, the value does not enter the array and the span is removed from the list that has the same index.

Now, see that you put two values in the checkbox: value="Get" and value="SLA contratual". The first will be ignored.

At last if it seems to me that you should only enter span if the checkbox is checked. Instead of if (selected.length > 0) you would use if (e.checked).

See what the code would look like:

function GetSelected(e) {
   var selected = new Array();
   var p = document.getElementById("teste");
   var portfolio = document.getElementById("section");
   var chks = portfolio.getElementsByTagName("INPUT");
   var span = document.createElement("span");

   for (var i =  0; i < chks.length; i++ ) {
      if (chks[i].checked) {
         selected.push(chks[i].value);
      }else if(p.childNodes[i]){
         p.removeChild(p.childNodes[i]);
      }
   };

   console.log("Você selecionou: " + selected.join(", "));
   if (e.checked) {
      span.innerHTML = selected.join(", "); 
      p.appendChild(span);
   }

};
span{
   display: inline-block;
   background: yellow;
   margin: 2px;
}
<div id="section">
   <input onClick="GetSelected(this)" type="checkbox" value="SLA contratual" />
   <input onClick="GetSelected(this)" type="checkbox" value="Outra coisa" />
</div>
<ul>
   <li id="teste"></li>
</ul>

Browser other questions tagged javascript html react input checkbox

You are not signed in. Login or sign up in order to post.