正在寻找特定的JS方法来确认单选按钮的选择

Looking for particular JS method to confirm radio button selection

本文关键字：确认 单选按钮 选择 方法 JS 寻找      更新时间：2023-12-24

我有一个问题，关于如何使用客户端JS验证来解决这个问题。

这是我建立的一个在线订购系统，刚刚实现了管理员/经理拆分&分批装运订单。当选择该操作时，我有一些JS，它在订单中的每个行项目旁边显示一对单选按钮，并可以选择"什么都不做"或"将此项目拆分为延期订单"，然后在系统中创建第二个订单，将任何选定的项目移到该订单上，并标记为延期订单。

这一切都很完美，但问题是当管理员/经理选择"拆分和延期订单"时：
A） 不选择要拆分的项目
B） 选择订单上要拆分的所有项目
C） 尝试拆分&延期订单和只有一个行项目的订单（出于验证目的，这与选择所有项目相同）

导致原始订单或分割订单可能没有附加任何项目。

我想执行JS验证，基本上停止PHP帖子，并在没有项目或所有项目都被选择拆分的情况下显示警报；延期交货。

我已经考虑过用JS.onclick函数来做这件事，并使用一个带有变量的循环来计算总项目数；项并进行比较，但问题是使其足够动态，以处理每个订单，因为表单单选按钮名称随每个订单而变化（由PHP完成）。在PHP中，我只会用帖子中的循环来扩展数组，但我甚至不知道在客户端JS中从哪里开始。

我真的不知道从哪里开始这个，一个朋友主动提出和我一起看，他比我更了解JS。

这就是我们最终实现的：

function validateAction() {
  var $productRows = $(".product-row");
  var $productsToSplit = [];
  $productRows.each(function(i) {
     var splitChecked = $('input[type=radio][value=1]:checked', $productRows[i]);
     if(splitChecked.length > 0) $productsToSplit.push(splitChecked[0]); 
  });
  //console.log($productsToSplit);
    switch($productsToSplit.length) {
        case 0:
            alert('No products have been selected to split & backorder. Please check your selection and try again.');
            event.preventDefault();
            break;
        case $productRows.length:
            alert('You cannot select all products in an order to split & backorder. Please check your selection and try again.');
            event.preventDefault();
            break;
    }
  //console.log($productsToSplit.length + " : " + $productRows.length);
};

我们最终将类"productRows"添加到每个产品行的Div中，这样我们就可以获取选中的单选按钮元素并进行验证。这是涉及的HTML：

<div class="row product-row">
                <!-- Div to show checkbox when Split Order is selected --> 
                <div class= "flat-green splititemchkbox" style="display:none" id="splititemchkbox">
                    <input type="hidden" name="splitbackitem[<?= @$prod['id'];?>][id]" value=<?= @$prod['id'];?>>
                    <input type="radio" style="transform: scale(2)" name="splitbackitem[<?= @$prod['id'];?>][checked]" value="0" checked="checked">
                    <label style="margin: 1%">Do Nothing</label>
                    <input type="radio" style="transform: scale(2)" name="splitbackitem[<?= @$prod['id'];?>][checked]" value="1">
                    <label style="margin-left: 1%">Split Item to Backorder</label>
                </div>

希望这能帮助其他人寻找类似的解决方案！

干杯

相关文章：