Question

我需要获取checked复选框的值（一次只允许检查一个），我有这个详细的代码：

if (!checkboxSelected) {
    return;
}

if($("#ckbx_produceusage").is(':checked')) {
    rptval = $('#ckbx_produceusage').val();
}
else if($("#ckbx_deliveryperformance").is(':checked')) {
    rptval = $('#ckbx_deliveryperformance').val();
}
else if($("#ckbx_fillrate").is(':checked')) {
    rptval = $('#ckbx_fillrate').val();
}
else if($("#ckbx_pricecompliance").is(':checked')) {
    rptval = $('#ckbx_pricecompliance').val();
}
setEmailAndGenerateValsForUnitReportPair(unitval, rptval);

有没有一种方法可以让这些代码更简洁，而不会让它变得不可思议？我想过动态地将一个类添加到被检查的复选框，然后从之前添加该类的任何一个中删除它，然后根据当前用该类装饰的rptval获取rptval。然而，这看起来有点臭或Rubegoldbergesque，所以我正在寻找更好的解决方案。

更新

对于T.J. Crowder，这是HTML（Razor / ASP.NET MVC风格）：

@foreach (var rpt in reports)
{
    @* convert id to lowercase and no spaces *@
    var morphedRptName = @rpt.report.Replace(" ", string.Empty).ToLower();
    <input class="ckbx leftmargin8" id="ckbx_@(morphedRptName)" type="checkbox" value="@rpt.report" />@rpt.report
}

Answer 1

JQuery集合是可过滤的，因此我建议使用以下内容：

// get value of first checked checkbox
var rptval = $(
   "#ckbx_produceusage,"+
   "#ckbx_deliveryperformance,"+
   "#ckbx_fillrate,"+
   "#ckbx_pricecompliance"
).filter(':checked').first().val();

注意：.first()甚至可能是不必要的，因为.val()获取集合中第一个元素的值。因为易读性而留下来。

Answer 2

$(function()
{
...
// IF (these are the only elements that id starts with ckbx_) THEN
    rptval = $('[id^=ckbx_]').filter(':checked').val();
// ELSE
    // this syntax is more maintainable than $('#ckbx_produceusage, #ckbx_fillrate, ... selectors à la queue');
    rptval = $('#ckbx_produceusage').add('#ckbx_fillrate').add('#ckbx_deliveryperformance').add('#ckbx_pricecompliance').filter(':checked').val();
// FI
...
});

Answer 3

在不更改HTML的情况下，您至少可以避免使用循环重复自己：

["#ckbx_produceusage", "#ckbx_deliveryperformance", "#ckbx_fillrate", "#ckbx_pricecompliance"].some(function(sel) {
    var e = $(sel);
    if (e.is(":checked")) {
        rptval = e.val();
        return true;
    }
});
setEmailAndGenerateValsForUnitReportPair(unitval, rptval)

您可以更改HTML，使初始数组可以是查询而不是ID选择器的硬编码列表。

Answer 4

您还需要考虑没有选中的情况。永远不要假设某事已经确定。

function getValue(checkBoxes)
{
    for ( var i = 0; i < checkBoxes.length; i++ )
    {
        var name = "#ckbx_" + checkBoxes[ i ];

        if ( $( name ).is( "checked" ) ) return $( name ).val();
    }

    //None were checked
    return null; //Should throw exception
}

rptval = getValue( [ "produceusage", "deliveryperformance", "fillrate", "pricecompliance" ] );

Answer 5

尝试使用.each（）

  $("input[type='checkbox']").each(function() {
    var rptval = 0;
    if ($(this).is(":checked")) {
      rptval = 1;
    }
    setEmailAndGenerateValsForUnitReportPair(unitval, rptval);
  });

我怎样才能使这个冗长的jquery变得优雅？

更新

5 个答案: