的Javascript檢查手段添加到列表

-3

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

如果上述任何選擇了4個輸入選項，我想顯示在頁面底部的運行列表.. ..所以，如果IDIS 2 & 9被選中，在底部會顯示..

ID：2，9

來源

2013-12-16 jonovision

寫一些代碼是最好的選擇 –

爲什麼？所以如果這個人犯了錯誤，他們不能撤消它？ –

除了JS在哪裏 –

你可以嘗試這樣的事情撥弄我颳起瞭解釋你的問題：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 + ', '; 
     } 
    } 
}

來源

2013-12-16 02:07:39 argo49

我想你可以使用jQuery淡入淡出和。 DEMO FROM w3cshool，不確定這是你想要的嗎？更清楚你想要什麼來實現

來源

2013-12-16 02:04:43

我打了一個比方，不能確定它是否是你想要的：這裏是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>

這裏是JS：

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

你可以檢查這個jsfiddle

來源

2013-12-16 02:29:41 Merlin

的Javascript檢查手段添加到列表

回答

相關問題