未选中复选框的值返回为＆＃34;未定义＆＃34;

Question

我确定已经在其他地方解决了这个问题，但我已经阅读了20多个试图找到答案的stackoverflow条目，但我读过的所有内容都没有完全解决这个问题。当我尝试采用提出的解决方案时，他们只是不工作。我在Mad Libs中检查未选中复选框时遇到问题，返回值为"undefined,"，以便下面的代码返回以下内容（例如，如果选中#check3而其他两个不是）：

最后，他们的成功完全可以归功于他们的未定义，未定义，专用[#noun-2值，它工作正常]。

var $end = " In the end, their success can be contributed entirely to their" 
           + $('#check1:checked').val() + ", " 
           + $('#check2:checked').val() + ", " 
           + $('#check3:checked').val() + " " 
           + $('#noun-2').val() + ".";`

如何知道如何返回仅选中复选框的值？我需要写一个if / else来实现这个目标吗？

这是html代码

<div class="checkboxes">
    <div class="check">
        <input id="check1" type="checkbox" name="adjective-2" value="powerful"> 
        <label for="check1">powerful</label>
    </div>
    <div class="check">
        <input id="check2" type="checkbox" name="adjective-2" value="honed">
        <label for="check2">honed</label> 
    </div>
    <div class="check">
        <input id="check3" type="checkbox" name="adjective-2" value="dedicated"> 
        <label for="check3">dedicated</label>
    </div>
</div>

Answer 1

您正在尝试获取尚未检查的值，这就是您未定义的原因

尝试此操作以获取价值

$('#check1').val()

试试这是否选中此复选框

$('#check1').is('checked') //this returns true or false

Answer 2

Working Fiddle

要实现此目的，您可以遍历选中的复选框，将值转换为数组，然后循环遍历数组以创建可读列表。

收集值

要收集值，请遍历每个选中的复选框并将它们添加到数组中。

function convertToArray() {
  var array = [];
  $('input[type=checkbox]:checked').each(function() {
    array.push($(this).val());
  });
  return array;
}

使值可读

然后，您可以使用以下函数调用reduce，将数组缩减为可读的人员列表：

function readableList(prev, curr, i, a) {
  let term = curr.toLowerCase();
  let grammer = (a.length === i + 1 && a.length > 1) ? ', and ' : (i > 0 ? ', ' : '');
  return `${prev}${grammer}${term}`;
}

把它放在一起

要将各个部分组合在一起，您可以调用像这样的更新功能

function onUpdate() {
  var array = convertToArray();
  var list = array.reduce(readableList, '');

  var end = " In the end, their success can be contributed entirely to their " + list + " " + $('#noun-2').val() + ".";
  $('#result').text(end);
}

完整代码

＆＃13;

＆＃13;

$('#updateButton').click(function(){
	onUpdate();
});

function onUpdate() {
  var array = convertToArray();
  var list = array.reduce(readableList, '');
  
  var end = " In the end, their success can be contributed entirely to their " + list + " " + $('#noun-2').val() + ".";
  $('#result').text(end);
}

function convertToArray() {
  var array = [];
  $('input[type=checkbox]:checked').each(function() {
  	array.push($(this).val());
  });
  return array;
}

function readableList(prev, curr, i, a) {
  let term = curr.toLowerCase();
  let grammer = (a.length === i + 1 && a.length > 1) ? ', and ' : (i > 0 ? ', ' : '');
  return `${prev}${grammer}${term}`;
}

＆＃13;

label {
  display: block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="checkboxes">
    <div class="check">
        <input id="check1" type="checkbox" name="adjective-2" value="powerful"> 
        <label for="check1">powerful</label>
    </div>
    <div class="check">
        <input id="check2" type="checkbox" name="adjective-2" value="honed">
        <label for="check2">honed</label> 
    </div>
    <div class="check">
        <input id="check3" type="checkbox" name="adjective-2" value="dedicated"> 
        <label for="check3">dedicated</label>
    </div>
</div>
<input type="text" value="house" id="noun-2">

<button id="updateButton">Update</button>

<h1>Result:</h1>
<div id="result"></div>

＆＃13;

＆＃13;

＆＃13;