显示选中复选框的值 javascript答案

【问题标题】：Display value of checked check boxes javascript显示选中复选框的值 javascript
【发布时间】：2014-04-13 02:41:58
【问题描述】：

在这里，我编写了一个 javascript，它在选中一个复选框时选择所有复选框，并且我想在单击按钮时显示所有选中的复选框值。在这里它确实选择了正确的功能（即它选择了所有复选框）。我是javascript新手，我需要一些帮助来显示所有选中的复选框值，任何人都可以通过单击复选框为我提供代码以选择所有复选框并使用javascript在单个函数中仅显示选定复选框的值只有……

这里是javascript代码

<script>
var checked=false;
function checkedAll ()
{
  var c =  document.getElementsByName("viju");
  checked = document.getElementById('causelist_month').checked;

 for (var i =0; i < c.length; i++)
 {
  c[i].checked=checked;
 }
}
</script>

这里是 HTML 代码

 <input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll ();">select all/unselect all
 <input type="checkbox" name="viju" id="viju" value="Jan" onClick="">jan
 <input type="checkbox" name="viju" id ="viju" value="feb" onClick="">feb
 <input type="Button" value="Show values" onClick="checkedAll(this.value)"/>

【问题讨论】：

您真的不应该为 HTML 中的多个元素使用相同的 ID。我建议您将您的 ID 更改为更有意义的 ID，例如“jan”或“feb”。
循环检查复选框的集合，如果是item[i].checked，则检查它，因此将值推送到数组（或其他一些存储对象）中。
@Asryael — 或完全删除 ID，它们不是必需的。
@RobG 是正确的，但是我不确定他是否会在程序中的其他位置使用这些 ID。

标签： javascript checkbox

【解决方案1】：

Jsfiddle http://jsfiddle.net/2UFdc/

HTML

<form>
    <input type="checkbox" name="causelist_month" id="causelist_month" onclick="checkedAll ();">select all/unselect all
    <input type="checkbox" name="viju" id="viju" value="Jan" onClick="">jan
    <input type="checkbox" name="viju" id ="viju" value="feb" onClick="">feb
    <input type="Button" value="Show values" onClick="showVal(this.form)"/>  
</form>

Javascript

var checked = false;

function checkedAll() {
    var c = document.getElementsByName("viju");
    checked = document.getElementById('causelist_month').checked;

    for (var i = 0; i < c.length; i++) {
        c[i].checked = checked;
    }
}

function showVal(frm) {
    var arr = [];
    for (var i in frm.viju) {
        if (frm.viju[i].checked) {
            arr.push(frm.viju[i].value);
        }
    }
    alert(arr);
    return arr
}

【讨论】：

【解决方案2】：

首先，为复选框使用事件监听器而不是 onClick：

document.getElementById("causelist_month").addEventListener('change', function(){
    checkboxes = document.getElementsByName("viju");
    for( var i=0; i<checkboxes.length; i++){
       checkboxes[i].checked = this.checked;
    }      
}, false);

对于选中的项目的显示，在 HTML 中：

<input type="Button" value="Show values" onClick="displayChecked()"/>
<div id="display"></div>

然后，在javascript中：

function displayChecked (){
    var display = "";
    checkboxes = document.getElementsByName("viju");
    for( var i=0; i<checkboxes.length; i++){
        if( checkboxes[i].checked ){
            display += " " + checkboxes[i].value;
        }
    }
    document.getElementById("display").innerHTML = display;
}

【讨论】：

【解决方案3】：

你可以使用 jquery 函数不要忘记包含 jquery 库

<button id="showall"> display </button> `
$("#showall").click(function() {

         var array = [];
             $(':checkbox:checked').each(function(i){
                  array[i] = $(this).val();
                 });

        $.each( array, function( i, val ) {
        $("#display").append(val); //the div where you want to display
         });

             });

【讨论】：

【解决方案4】：

<!DOCTYPE html>
<html>
<script>
var checked=false;
function checkedAll()
{
   var c = document.getElementsByName("viju");
   var checkboxesChecked = [];
  // loop over them all
  for (var i=0; i<c.length; i++) {
  // And stick the checked ones onto an array...
  if (c[i].checked) {
    checkboxesChecked.push(c[i]);
      }
 }

if(document.getElementById('causelist_month').checked)
{
    checked = document.getElementById('causelist_month');
    checkboxesChecked.push(checked);
}

  for (var j=0; j<checkboxesChecked.length; j++) {
      // iterate the pushed values
       alert(checkboxesChecked[j].value);
 }

}
</script>
<body>
<form>
<input type="checkbox" name="causelist_month" id="causelist_month" value="select all/unselect all" onclick="checkedAll     ();">select all/unselect all
 <input type="checkbox" name="viju" id="viju" value="Jan" onClick="">jan
 <input type="checkbox" name="viju" id ="viju" value="feb" onClick="">feb
 <input type="Button" value="Show values" onClick="checkedAll(this.value)"/>  
<form>
</body>
</html>

这会一一显示警报消息中的所有复选框列表。请检查

【讨论】：