如何缩短“是”/“否”代码？

我有这些动态复选框，每个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

如何缩短“是”/“否”代码？

回答

相关问题