Javascript检查意味着添加到列表[关闭]

I have a checkbox....

<input  type="checkbox" name="idis" id="1" value="1" class="input-hidden" />
<input  type="checkbox" name="idis" id="2" value="2" class="input-hidden" />
<input  type="checkbox" name="idis" id="8" value="8" class="input-hidden" />
<input  type="checkbox" name="idis" id="9" value="9" class="input-hidden" />

If any of the 4 input options above are selected, I want to show a running list on the bottom of the page....so, if idis 2 & 9 is checked, at the bottom it will show..

ID: 2, 9.

You can try something like this fiddle I whipped up: jsFiddle

// Get a handle on all inputs
var inputs = document.getElementsByTagName('input');

// Get a handle on all labels
var labels = document.getElementsByTagName('label');

// Attach event handlers
for(var i = 0; i < inputs.length; i++){
    if(inputs[i].type === 'checkbox'){
        inputs[i].onchange = showChecked
    }
}

// Function to display currently checked elements
function showChecked(){
    // Get a handle on the results div
    var results = document.getElementById('results');
    // Reset the content of results
    results.textContent = "";

    // Check each checkbox and add their label to the results div
    for(var i = 0; i < inputs.length; i++){
        if(inputs[i].type === 'checkbox' && inputs[i].checked == true){
            results.textContent += labels[i].textContent + ', ';
        }
    }
}

i think you can use jquery fadein and fadeout. DEMO FROM w3cshool, Not sure this is what you want it ? Explain your problem more clearly what you want to achieve

I made a example, not sure whether it's what you want: Here is HTML

<input  type="checkbox" value="check1" class="input-hidden" /><label for="check1">check1</label>
<input  type="checkbox" value="check2" class="input-hidden" /><label for="check2">check2</label>
<input  type="checkbox" value="check3" class="input-hidden" /><label for="check3">check3</label>
<input  type="checkbox" value="check4" class="input-hidden" /><label for="check4">check4</label>
<div id="relt"></div>

Here is JS:

$(".input-hidden").on("click", function(e){   
    var relts = $(".input-hidden:checked").map(function(i,n){
        return n.value
    });
    $("#relt").text(relts.get().join(","));
})

you can check this on jsfiddle