Question

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

有两种方法可供选择。 - 拿起自己 - 交付

当你选择radiobutton“传递”时，一些带有textarea的div是可见的。需要这个textarea。

但是当你选择radiobutton“拿起自己”时，textarea是不可见的，不再需要了。

任何人都可以帮我解决这个问题吗？

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

您可以在此处看到代码示例：

＆＃13;

$(document).ready(function() { 
  var submitMessage = "";
  
  $(":radio").change(function() {
    var selectedRadio = $("input[name='shipping_method']:checked").val();
    
    if (selectedRadio == "freeshipping_freeshipping") {
      $("#deliv-hold").hide(250); 
    }
    else {
      $("#deliv-hold").show(250); 
    }
  });
  
  $("form").submit(function(e) {
    
    var selectedRadio = $("input[name='shipping_method']:checked").val();
    
    if (selectedRadio == "freeshipping_freeshipping") {
      submitMessage = "Your command is in process. Thank you for purshasing.";
    }
    else {
      if ($("#shipping_arrival_comments").val().length < 1) {
        e.preventDefault();
        alert("Field 'delivery date and time' missing.");
        submitMessage = "";
      }
      else {
        submitMessage = "Deliver is on his way. Thank you for purshasing."; 
      }
    }
    
    if (submitMessage != "") {
      alert(submitMessage); 
    }
  });
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <title> Test check </title>
    <meta charset = "utf-8" />
  </head>
  <body>
    <span>Choose your delivery method :</span>
    <form>
      <input type="radio" class="radio" id="s_method_freeshipping_freeshipping" value="freeshipping_freeshipping" name="shipping_method"> 
      <label for="s_method_freeshipping_freeshipping">Pick up yourself</label>
      <input type="radio" class="radio" checked="checked" id="s_method_tablerate_bestway" value="tablerate_bestway" name="shipping_method"> 
      <label for="s_method_tablerate_bestway">Deliver</label>
    
    <br />
    <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>
      <input type = "submit" id="submit_delivery" name = "submit_delivery" />
      </form>
  </body>
</html>

＆＃13;

我使用JQuery include（参见下面脚本包含的代码）来使用比普通javascript更容易使用的DOM选择器。

Answer 2

如果您使用的是纯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。

干杯，伊恩

Answer 3

我更新了你的小提琴（它也需要textarea）：

http://jsfiddle.net/gv7xh4cg/4/

你应该包含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);
    }
});

然后添加display：none：

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

它符合您的要求。

选择Radiobutton时显示div并进行必要的操作

3 个答案: