CODEWITHSUNDEEP
javascripthtmlcheckbox
Nebi
Nebi

Reputation: 57

show checked checkbox values on textarea javascript

I am trying to get all the checkbox checked values on the input field provided. I am using javascript to get the values but it only shows one checked value. When I check another checkbox it displays the second one only. Here is what i did so far:

<html>
<head>
<script type="text/javascript">
function checkbox(val){
document.getElementById("show").value = val;
}
</script>
</head>
<body>
    <form>
        <input type="checkbox" id="bk" name="vehicle" onClick="checkbox(this.value);" value="Bike">I have a bike<br></br>
        <input type="checkbox" id="cr" name="vehicle" onClick="checkbox(this.value);" value="Car">I have a car<br></br> 
        <input type="text" id="show" name="vehicle"><br>
        <input type="submit" value="Showe">
    </form> 
</body>
</html>

As I said, this one only shows a single checked value, but I want to show all the checked values on the input field specified! Thanks!

Upvotes: 0

Views: 12597

Answers (2)

KIAAT
KIAAT

Reputation: 11

var txt = document.getElementById( 'droptxt' ),
            content = document.getElementById( 'content' ),
            list = document.querySelectorAll( '.content input[type="checkbox"]' ),
            quantity = document.querySelectorAll( '.quantity' );
        txt.addEventListener( 'click', function() {
            content.classList.toggle( 'show' )
        } )

        window.onclick = function( e ) {
            if ( !e.target.matches( '.list' ) ) {
                if ( content.classList.contains( 'show' ) ) content.classList.remove( 'show' )
            }
        }

        list.forEach( function( item, index ) {
            item.addEventListener( 'click', function() {
                calc()
            } )
        } )

        function calc() {
            for ( var i = 0, arr = []; i < list.length; i++ ) {
            let spanArray = [];
            document.querySelectorAll('span').forEach(element => {
                spanArray.push(element.innerHTML);
            });
            
                if ( list[ i ].checked ) arr.push( list[ i ].value + " "+ spanArray)
            }   
            txt.value = arr.join(', ')
        }
    h1 {
            color: #0000ff;
        }
        #droptxt {
            padding: 8px;
            width: 300px;
            cursor: pointer;
            box-sizing: border-box
        }
        .dropdown {
            position: relative;
            display: inline-block
        }
        .content {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 200px;
            overflow: auto;
            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
            z-index: 1
        }
        .content div {
            padding: 10px 15px
        }
        .content div:hover {
            background-color: #ddd
        }
        .show {
            display: block
        }
<h1>KIAAT</h1>
    <b>Adding/Removing Checkbox Values into TextArea</b>
    <br><br>
    <input type="text" id="droptxt" class="list" placeholder="Select the values" readonly>
        <div id="content" class="content">
            <div id="market" class="list">
            <label><input type="checkbox" id="market" class="list"  value="Bike" /> I have a bike</label>
            </div>
            
            <div class="list">
            <label><input type="checkbox" id="banana" class="list" value="Car" /> I have a car</label>
            </div>
        </div>

Upvotes: 0

Robert Wade
Robert Wade

Reputation: 5003

Your code is only sending the currently clicked item to the method. You need to look at all the checkboxes in that method and find the checked ones, put them in an array, then insert the array value into your input. Also worth noting, when you do it this way and build out the array on each click, it also makes it appear as though items are being removed from the input when you uncheck them.

function checkbox(){
  
  var checkboxes = document.getElementsByName('vehicle');
  var checkboxesChecked = [];
  // loop over them all
  for (var i=0; i<checkboxes.length; i++) {
     // And stick the checked ones onto an array...
     if (checkboxes[i].checked) {
        checkboxesChecked.push(checkboxes[i].value);
     }
  }
  document.getElementById("show").value = checkboxesChecked;

}
    <form>
        <input type="checkbox" id="bk" name="vehicle" onClick="checkbox();" value="Bike">I have a bike<br></br>
        <input type="checkbox" id="cr" name="vehicle" onClick="checkbox();" value="Car">I have a car<br></br> 
        <input type="text" id="show" name="vehicle"><br>
        <input type="submit" value="Showe">
    </form>

Upvotes: 5

Related Questions