显示选中的复选框值在textarea javascript

show checked checkbox values on textarea javascript

本文关键字：textarea javascript 复选框显示更新时间：2023-09-26

我试图在提供的输入字段上获得所有复选框选中的值。我使用javascript来获取值，但它只显示一个检查值。当我选中另一个复选框时，它只显示第二个。以下是我目前所做的:

<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>

正如我所说，这个只显示一个选中的值，但是我想在指定的输入字段中显示所有选中的值!谢谢!

您的代码只将当前单击的项发送给该方法。你需要查看那个方法中的所有复选框并找到选中的复选框，将它们放入数组中，然后将数组值插入到输入中。同样值得注意的是，当您这样做并在每次单击时构建数组时，当您取消选中它们时，它还使其看起来好像从输入中删除了项。

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>

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>