检查输入单选时显示/隐藏答案

【问题标题】：Show/Hide when input radio is checked检查输入单选时显示/隐藏
【发布时间】：2019-09-23 16:20:30
【问题描述】：

如果输入被选中，我需要仅显示一个 div。所以我这样做了：

$(document).ready(function () {
$('#group_1 input').each(function () {
  if ($(this).val() == ('23') && $(this).is(':checked')) {
          $('#showtext').show();

  } else {
      $('#showtext').hide();
  }
 });
 });

被调用的组在这里（PrestaShop 1.7.5.1）：

 {elseif $group.group_type == 'radio'}
<ul id="group_{$id_attribute_group}">
  {foreach from=$group.attributes key=id_attribute item=group_attribute}
    <li class="input-container float-xs-left">
      <label class="accordion--form__label">
        <input class="input-radio" type="radio" data-product-attribute="{$id_attribute_group}" name="group[{$id_attribute_group}]" value="{$id_attribute}"{if $group_attribute.selected} checked="checked"{/if}>
        <span class="radio-label">{$group_attribute.name}</span>
      </label>
    </li>
  {/foreach}
</ul>
 {/if}

但是，如果选中 #group_1 值 24 或未选中任何内容，我需要 > 隐藏 #showtext。我不能拥有这个。怎么了？

我要隐藏/显示的值 23 的源代码是：

<input class="input-radio" type="radio" data-product-attribute="1" name="group[1]" value="23" checked="checked">

当它处于活动状态时，必须隐藏 div：

<input class="input-radio" type="radio" data-product-attribute="1" name="group[1]" value="24">

【问题讨论】：

我仍然找不到解决此问题的方法。有人可以吗？

标签： input show-hide prestashop-1.7

【解决方案1】：

您的单选按钮没有名为“group_1”的 ID，但它们的名称名为“group[1]”。在这种情况下，您可以使用 jquery 像这样按名称访问。

         <div class="container">

                23 <input class="input-radio" type="radio" data-product-attribute="1" name="group[1]" value="23" checked > 

                24 <input class="input-radio" type="radio" data-product-attribute="1" name="group[1]" value="24">

                <div id="showtext">This is what is to be shown or hidden</div>
            </div>

        <script>
            $(document).ready(function () {   
                var radioValue = $("input[name='group[1]']:checked").val();
                //alert(radioValue);
                if(radioValue == '23') {
                    $('#showtext').show();
                }
                else {
                    $('#showtext').hide();
                }


                $("input[type='radio'][name='group[1]']").click(function() {
                    radioValue = $("input[name='group[1]']:checked").val();
                    //alert(radioValue);
                    if(radioValue == '23') {
                        $('#showtext').show();
                    }
                    else {
                        $('#showtext').hide();
                    }                        
                });

            });
        </script>

希望这会有所帮助。

【讨论】：

您好，谢谢！它适用于第一步，但如果我检查无线电 23，然后检查第二个无线电 24，则文本不会隐藏。我的意思是：点击第一个收音机 > 显示文字作品！（谢谢！）在此之后，如果我想更改并单击第二个收音机 > 显示文本未隐藏 :(
我必须补充一点，如果我再次检查第一个收音机，这次 div 不会显示......
对不起.. 但我无法重现您提到的错误。我最初没有选中 23 单选按钮，即使这样它也可以工作。

【解决方案2】：

好的，现在的问题是：如果我检查输入 24，然后单击输入 23（div 现在可见）再次选择输入 24，则 div 不会隐藏。如果我将其单独使用，该代码运行良好，但在 PrestaShop product.tpl 中，我遇到了这个问题。 “showtext”保持可见。您对可能出现的错误有什么想法吗？也许是表单购物车？

输入在表单内部，div 在外部（因为它在 product-customization.tpl 中有另一个表单）：

 <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
              <input type="hidden" name="token" value="{$static_token}">
              <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
              <input type="hidden" name="id_customization" value="{$product.id_customization}" id="product_customization_id">

【讨论】：