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

Question

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

有2种方法可用。 - 拿起你自己 - 交付

当您选择单选按钮 "deliver" 时，一些带有文本区域的 div 是可见的。此文本区域需要填写。

但是当你 select radiobutton "pick up yourself" 文本区域是不可见的并且不再需要时。

谁能帮我解决这个问题？

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

您可以在此处查看执行此操作的代码示例：

$(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); 
    }
  });
  
});

<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>

我使用 JQuery include（见下面脚本包含的代码）来使用 DOM 选择器，它比普通的 javascript.

更容易使用

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

我更新了你的fiddle（它也使文本区域成为必需）：

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);
    }
});

然后添加显示：none:

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

它满足您的要求。

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

Radiobutton when selected show div and make required

javascript

forms

validation