Question

这里我写了一个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)"/>

Answer 1

首先，使用复选框的事件侦听器而不是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;
}

Answer 2

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
}

Answer 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
         });

             });

`

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

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

显示已选中复选框javascript的值

4 个答案: