获取文本框中所有选中复选框的值

Question

我正在尝试创建一个具有某个值的复选框，然后显示以逗号分隔的选定复选框的值。

我可以创建复选框，但无法在文本框中显示值。请帮忙

function displayCheckbox(){    
    $("input:checkbox").change(function() {          
        selectedCB = [];
        notSelectedCB = [];
        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedCB[0] = $(this).attr("id");
            }
        });
        $('input[name=selectedCB]').val(CountSelectedCB); 
    });
}

Answer 1

您正在覆盖 CountSelectedCB[0]。

最好试试

var $target = $('input[name=selectedCB]');
var $checkboxes = $("input[type=checkbox]").on('change', function() {
    $target.val(
        $checkboxes.map(function() {
            return this.checked ? this.id : null;
        }).get().join()
    );
});

var abc = [1, 2, 3];
var CountSelectedCB = new Array();
var s1 = document.getElementById('demo');
for (var option in abc) {
  if (abc.hasOwnProperty(option) && !document.getElementById('CheckBox' + abc[option])) {
    var pair = abc[option];
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = 'CheckBox' + pair;
    checkbox.name = pair;
    checkbox.value = pair;
    s1.appendChild(checkbox);

    var label = document.createElement('label')
    label.htmlFor = pair;
    label.appendChild(document.createTextNode(pair));
    s1.appendChild(label);
    s1.appendChild(document.createElement("br"));
  }
}
var $target = $('input[name=selectedCB]');
var $checkboxes = $("input[type=checkbox]").on('change', function() {
  $target.val(
    $checkboxes.map(function() {
      return this.checked ? this.id : null;
    }).get().join()
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="demo"></div>
<input type="text" name="selectedCB" />

或者像这样：

var $target = $('input[name=selectedCB]');
var $checkboxes = $("input[type=checkbox]").on('change', function() {
    $target.val(
        $checkboxes.filter(':checked').map(function() {
            return this.id;
        }).get().join()
    );
});

var abc = [1, 2, 3];
var CountSelectedCB = new Array();
var s1 = document.getElementById('demo');
for (var option in abc) {
  if (abc.hasOwnProperty(option) && !document.getElementById('CheckBox' + abc[option])) {
    var pair = abc[option];
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.id = 'CheckBox' + pair;
    checkbox.name = pair;
    checkbox.value = pair;
    s1.appendChild(checkbox);

    var label = document.createElement('label')
    label.htmlFor = pair;
    label.appendChild(document.createTextNode(pair));
    s1.appendChild(label);
    s1.appendChild(document.createElement("br"));
  }
}
var $target = $('input[name=selectedCB]');
var $checkboxes = $("input[type=checkbox]").on('change', function() {
  $target.val(
    $checkboxes.filter(':checked').map(function() {
      return this.id;
    }).get().join()
  );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="demo"></div>
<input type="text" name="selectedCB" />

Answer 2

您遍历所有复选框并将值保存在某个字符串中，然后将其放入文本字段中：

var string = "";
$('.checkButtonClass').each(function() {
     if($(this).is(':checked')) {
     string = string + $(this).val() +", ";
}
$("#idTextfield").html(string);

Answer 3

您的方法的主要问题在于这一行：

CountSelectedCB[0] = $(this).attr("id");

您使用数组的方式 CountSelectedCB，您总是在第一个位置（索引 0）插入一个复选框的 ID，因此无论有多少个复选框，您总是会得到一个 ID如果没有选中复选框，则选中（或没有 ID）。

您应该将上面的行更改为：

CountSelectedCB.push($(this).attr("id"));

此外，由于 CountSelectedCB 的范围比 displayCheckbox 函数高，它会在 displayCheckbox 的调用之间保持它的值，因此在每次 change 事件触发时，您必须先 clear the array 添加已检查 ID 的更新列表。否则，您更新的 ID 列表将附加到先前存储的列表中。

您的代码可能如下所示 (sample Fiddle)：

function displayCheckbox(){    
    $("input:checkbox").change(function() {          
        selectedCB = [];
        notSelectedCB = [];

        CountSelectedCB.length = 0;                       // clear selected cb count before adding the updated ones
        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedCB.push($(this).attr("id")); // add id to count selected cb
            }
        });

        $('input[name=selectedCB]').val(CountSelectedCB); 
    });
}

$(document).ready(displayCheckbox);

CountSelectedCB = [];

function displayCheckbox(){    
    $("input:checkbox").change(function() {          
        selectedCB = [];
        notSelectedCB = [];
        
        CountSelectedCB.length = 0; // clear selected cb count
        $("input:checkbox").each(function() {
            if ($(this).is(":checked")) {
                CountSelectedCB.push($(this).attr("id"));
            }
        });
        
        $('input[name=selectedCB]').val(CountSelectedCB); 
    });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cb1">Checkbox #1
<input type="checkbox" id="cb2">Checkbox #2
<input type="checkbox" id="cb3">Checkbox #3
<hr />
<input name="selectedCB">

这是实现此目的的另一种方法 (sample Fiddle)

本质上，您最初向每个复选框添加一个 change 侦听器（在文档准备就绪时或根据您的应用程序逻辑的其他事件），它将打印所有选中的框。

var checkboxes = $("input:checkbox"); // save checkboxes into a variable so we don't waste time by looking them up each time

// add change listeners to checkboxes
$.each(checkboxes, function() {
  $(this).change(printChecked);
})

然后你创建了一个函数来实际打印选中框的 ID:

function printChecked() {
    var checkedIds = [];

    // for each checked checkbox, add it's id to the array of checked ids
    checkboxes.each(function() {   
        if($(this).is(':checked')) {
            checkedIds.push($(this).attr('id'));
        }
    });

    $('input[name=selectedCB]').val(checkedIds); 
}

$(document).ready(displayCheckbox);

function displayCheckbox() {    
   
    var checkboxes = $("input[type=checkbox]");
    var displayField = $('input[name=selectedCB]');

    $.each(checkboxes, function() {
      $(this).change(printChecked);
    })
    
    function printChecked() {
        var checkedIds = [];

        // for each checked checkbox, add it's id to the array of checked ids
        checkboxes.each(function() {   
            if($(this).is(':checked')) {
                checkedIds.push($(this).attr('id'));
            }
        });

        displayField.val(checkedIds); 
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cb1">Checkbox #1
<input type="checkbox" id="cb2">Checkbox #2
<input type="checkbox" id="cb3">Checkbox #3
<hr />
<input name="selectedCB">

获取文本框中所有选中复选框的值

get the value of all selected checkboxes in textbox

javascript

checkbox

jquery