未选中的复选框中的值返回为"undefined"

Question

我敢肯定这是在其他地方解决的，但是我已经阅读了20多个stackoverflow条目，试图找到答案当我尝试采用拟议的解决方案时，它们只是不起作用。我在MAD Libs中使用未选中的复选框问题返回"undefined,"的值，以便下面的代码返回以下内容（例如，如果检查了＃Check3，而其他两个则没有）：

最后，他们的成功可以完全为他们的未定义，未定义，专用[＃名词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/否才能实现吗？

这是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

工作小提琴

要获得此功能，您可以循环循环通过检查的复选框，将值转换为数组，然后循环循环以创建可读列表。

收集值

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

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

使值可读

然后，您可以通过使用以下功能调用REDAL来将数组减少到可读的人类列表：

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

完整代码

$('#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}`;
}

label {
  display: block;
}

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

Answer 2

您正在尝试获得尚未检查的值

尝试以此获取值

$('#check1').val()

尝试这是该复选框是否检查或未检查

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