未选中复选框的值将返回为“undefined”

Question

我确定这已在别处解决，但我已经阅读了20多个stackoverflow条目，试图找到答案，但是我读过的所有条目都没有解决此问题确切地说，当我尝试采用提议的解决方案时，他们只是不工作。我在Mad Lib中的未经检查的复选框出现问题，返回值为"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/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

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

的完整代码

$('#updateButton').click(function(){ 
 
\t 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() { 
 
    \t 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() 

试试这个是这个复选框是che cked或不

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