未選中複選框的值將返回爲「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