javascript - 单选按钮选择时显示 div 并设为必需

Question

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

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

当您选择单选按钮“传送”时，某些带有文本区域的 div 可见。该文本区域是必需的。

但是，当您选择单选按钮“拿起自己”时，文本区域将不可见，不再需要。

I made a fiddle of the items

谁能帮我解决这个问题吗？

<小时/>

HTML:

<h2>Select delivery method</h2>
    <input type="radio" class="radio" id="s_method_freeshipping_freeshipping" value="freeshipping_freeshipping" name="shipping_method"> pick up
    <input type="radio" class="radio" checked="checked" id="s_method_tablerate_bestway" value="tablerate_bestway" name="shipping_method"> deliver

<div id="deliv-hold">
    the delivery date and time:<br>
    <textarea id="shipping_arrival_comments" name="shipping_arrival_comments" style="min-width: 265px;" rows="4"></textarea>
</div>

Answer 1

如果你想要纯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");
    }
}

http://jsfiddle.net/gv7xh4cg/9/

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

干杯，伊恩