如何縮短「是」/「否」代碼？

我有這些動態複選框，每個ID +數字+1。誰能告訴我如何縮短這段代碼？也許沒有什麼難的，但我剛開始使用jQuery和JavaScript，所以這是一個有點複雜，我:(如何縮短「是」/「否」代碼？

if(!$('#g:checked').length){ 
     $("#h").val("No"); 
} else { 
     $("#h").val("Yes"); 
} 
if(!$('#g2:checked').length){ 
     $("#h2").val("No"); 
} else { 
     $("#h2").val("Yes"); 
} 
if(!$('#g3:checked').length){ 
     $("#h3").val("No"); 
} else { 
     $("#h3").val("Yes"); 
} 
if(!$('#g4:checked').length){ 
     $("#h4").val("No"); 
} else { 
     $("#h4").val("Yes"); 
} 
if(!$('#g5:checked').length){ 
     $("#h5").val("No"); 
} else { 
     $("#h5").val("Yes"); 
} 
if(!$('#g6:checked').length){ 
     $("#h6").val("No"); 
} else { 
     $("#h6").val("Yes"); 
} 
if(!$('#g7:checked').length){ 
     $("#h7").val("No"); 
} else { 
     $("#h7").val("Yes"); 
} 
if(!$('#g8:checked').length){ 
     $("#h8").val("No"); 
} else { 
     $("#h8").val("Yes"); 
} 
if(!$('#g9:checked').length){ 
     $("#h9").val("No"); 
} else { 
     $("#h9").val("Yes"); 
} 
if(!$('#g10:checked').length){ 
     $("#h10").val("No"); 
} else { 
     $("#h10").val("Yes"); 
}

來源

2011-05-23 elvis

你可以添加一個類到所有這些元素？ – Orbling 2011-05-23 14:37:33

發佈你的html將幫助人們回答你的問題 – Adelave 2011-05-23 14:38:53

供將來參考，[我們有一個網站]（http://codereview.stackexchange.com）。 – Will 2011-05-23 14:54:26

-1

你可以使用一個簡單的循環，例如。

var n; 
for(n=1; n<10; n++) { 
    $('#h'+n).val($('#g'+n).is(':checked') ? 'Yes' : 'No'); 
}

而且三級操作員也使邏輯更緊湊一些。爲了保持一致，您應該將'h'和'g'元素ID重命名爲'h1'和'g1'。

來源

2011-05-23 14:40:34

哇，真快！感謝你們！我會堅持a'r的建議。爲我工作:) – elvis 2011-05-23 15:08:09

在這裏做的最好的事情是調整的標記，以便它是友好的，以你的代碼的需求即使你不這樣做，但是，你可以做這樣的事情：

$('input:checkbox').each(function() { 
    var cb = this; 
    $('#h' + cb.id.replace(/^g/, '')).val(cb.checked ? 'Yes' : 'No'); 
});

個人而言，我不喜歡做有「身份證」的價值觀體操，我會做的「G」複選框之間的關係，通過使用「數據」屬性或通過以某種規則的方式對元素進行分組（在具有特定類的<span>內），「h」字段更加明確，或其他有意義的東西）。我不喜歡污染標記，但是當你所做的事情總體上有意義時，通常會找到很好的平衡點。

來源

2011-05-23 14:39:28 Pointy

+1以獲得良好的解決方案。 – pixelbobby 2011-05-23 14:40:31

短而甜！小問題：你錯過了''h''前面的'#'。 – verdesmarald 2011-05-23 14:42:22

@veredsmarald是的，我只是注意到 - 我的一臺筆記本電腦有一個粘性的「5」鍵，現在這一個正在開發一個粘性「3」:-) – Pointy 2011-05-23 14:43:14

-1

for (var i = 0; i < 11; i++) { 
    ($("#g"+i+":checked").length) ? $("#h"+i).val("No") : $("#h"+i).val("Yes"); 
}

這就是說，我也會調整你的標記有點像上面提到的海報。也許給他們所有的班級輕鬆收集他們，然後可能是一個任意的屬性來表明他們的號碼/位置像<div class='checkbox' position='3'></div>或類似的東西

來源

2011-05-23 14:40:03

downvote？真？這個問題完美地回答了這個問題，至少解釋了爲什麼你不喜歡它： -/ – 2011-05-23 14:42:25

我沒有倒下，但是由於你的解決方案缺乏動態性，無論誰做了這些。如果OP隨之而來，那麼每當元素被添加或帶走時，腳本也將不得不進行調整。有趣的是，我只注意到我的答案也被拒絕投票，儘管這裏的答案與頂級投票答案非常相似。 – 2011-05-23 14:45:26

我不是低調的選民，但是'（$（「＃g」+ i +「：checked」）。length）？ $（「＃h」+ i）.val（「No」）：$（「＃h」+ i）.val（「Yes」）;'比'$（「＃h」 + i）.val（$（「＃g」+ i）[0] .checked？「是」：「否」）;'。如果稍後複選框的數量發生變化，您的解決方案也不靈活。最後，OP代碼沒有'g1'和'h1'，他們只是名爲'g'和'h'，但在這裏我完全支持你說他們應該被重命名。 – verdesmarald 2011-05-23 14:45:36

試試這個;

function shorter(selecter, selecter1) { 
    if (!$(selecter + ':checked').length) { 
     $("#" + selecter1).val("No"); 
    } else { 
     $("#" + selecter1).val("Yes"); 
    } 
}

來源

2017-08-03 13:22:07

如何縮短「是」/「否」代碼？

回答

相關問題