Javascript 选中单选按钮时，显示div并使其成为必需

我有一个Magento网站，在订购产品时有一些交付选项

有两种方法可用。 -振作起来 -交付

当您选择radiobutton时，可以看到一些带有文本区域的div。 此文本区域是必需的

但是，当您选择radiobutton pick yourself时，文本区域是不可见的，不再需要

有谁能帮我做这件事吗

HTML:

---

在这里，您可以看到这样做的代码示例：

$document.readyfunction{ var submitMessage=； $：radio.changefunction{ var selectedRadio=$input[name='shipping_method']：checked.val； 如果选择Radio==freeshipping\u freeshipping{ $deliver-hold.hide250； } 否则{ $deliver-hold.show250； } }; $form.submitFunction{ var selectedRadio=$input[name='shipping_method']：checked.val； 如果选择Radio==freeshipping\u freeshipping{ submitMessage=您的命令正在执行中。感谢您的购买。； } 否则{ 如果$shipping\u arrival\u comments.val.length<1{ e、 防止违约； alertField“交货日期和时间”缺失。； submitMessage=； } 否则{ submitMessage=Deliver正在路上。谢谢您的购买。； } } 如果提交消息！={ alertsubmitMessage； } }; }; 测试检查 选择您的配送方式： 振作起来 传送 交货日期和时间：

---

如果您想要纯js版本，可以使用以下方法：

function check() {
    var items = document.getElementsByName('shipping_method');
    var v = null;
    for (var i = 0; i < items.length; i++) {
        if (items[i].checked) {
            v = items[i].value;
            break;
        }
    }

    var required = (v == "tablerate_bestway");
    document.getElementById("deliv-hold").style.display = required ? "block" : "none";
    if (required) {
        document.getElementById("shipping_arrival_comments").setAttribute("required", true);
    } else {
        document.getElementById("shipping_arrival_comments").removeAttribute("required");
    }
}

基本上，迭代相同名称的项，查看它们是否被选中，是否被选中，从中获取值并使用该值来显示或隐藏comments div

干杯，

---

伊恩

我更新了你的小提琴它还需要文本区域：

您应该包括以下内容的jQuery：

$('input.radio').click(function(){
    var selectedOption = $(this).val();

    var delivlHold = $('#deliv-hold'),
        comments = $('#shipping_arrival_comments');

    if(selectedOption === 'freeshipping_freeshipping') {
        delivlHold.show();
        comments.prop('required',true);
    } else {
        delivlHold.hide();
        comments.prop('required',false);
    }
});

然后添加显示：无：

#deliv-hold{padding-top:20px; display: none}

---

它满足了您的要求。

谢谢您的支持，验证是最重要的。文本区域需要至少填充1个字符。否则提交时，您需要获得弹出窗口或其他消息。这就是我对required的意思。Snippet已经为验证更新了。+编辑代码段以在未键入文本时不显示传递消息。谢谢，我将尝试在magento表单中实现它。提交按钮看起来是这样的：希望它能工作。它会工作，因为如果表单不正确，e；将阻止提交表单，因此不会发送任何数据，也不会触发“提交”按钮的行为。谢谢，我也找到了一种方法，但最重要的是在选择“提交”按钮时获取所需的文本区域。我想这会很困难。我想根据SelectionThank设置所需的属性，但我无法真正测试这是否有效，因为没有submit按钮。我会先试试虫族的回答并添加一个提交按钮当选择“拾取”时，文本区域仍然是必需的：正确的，只需稍加调整，开始时交付是可见且必需的，当拾取无文本区域且不需要时。添加提交按钮后，它无法正常工作。我喜欢这个脚本thowYes，我喜欢让事情简单明了，至于添加submit按钮，这只是做你最初要求的，但稍加调整就可以很容易地安装。无论如何，我看到你已经有了自己的代码，所以不用费心编辑了：谢谢你没有使用jQuery验证插件，所以你不应该使用标签。编辑。谢谢

#deliv-hold{padding-top:20px; display: none}