两种形式的单选单选

Posted 2023-05-09

【中文标题】两种形式的单选单选

【英文标题】：Single radio select on two forms

【发布时间】：2015-08-22 03:11:40

【问题描述】：

我有两个对应两种不同形式的单选按钮。

根据选择的电台，我想完成两个不同的动作，这就是我有两种形式的原因。

我遇到的问题是，当两个无线电位于一个表单上时，单无线电选择可以工作。如果它们有两种不同的形式，那么单一选择不起作用。

两台收音机同名，但我不知道如何根据两种不同的形式强制单选。 我正在使用 jQuery（不是用于收音机选择，但 jQuery 就在那里）所以虽然我不希望在此操作中使用 jQuery，但如果归根结底，我可以接受。

谁能为此提供解决方案或解决方案方向的指针？

最好的问候，

编辑 我正在根据要求放置一些代码

<div class="payment-details-account-top">
    <form id="payment-details-form-card" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
        <div class="row all-steps">
            <div class="col-md-12">
                <input type="radio" name="payment-type" value="<?php echo $this->__('Betale med kort') ?>" id="payment-with-card" class="css-checkbox" <?php if ($ba->getMethodCode() == 'payex2'): ?> checked <?php endif; ?> onclick="this.form.submit();">
                <label for="payment-with-card" class="css-radio-label"></label>
                <input type="submit" name="payment-with-card" id="payment-with-card" value="<?php echo $this->__('Betale med kort') ?>" class="top-payment-buttons" />
                <div class="creditcards"></div>
                <!-- <span class="payment-method-message"><?php if ($ba->getMethodCode() == 'payex2') echo $message; ?></span> -->
            </div>
        </div>
    </form> <!-- Close "payment-details-form-card" form -->
</div>
<div class="payment-details-account-bottom">
    <form id="payment-details-form" action="<?php echo Mage::getUrl('orderform/index/changedpayment'); ?>" method="POST">
        <div class="col-md-12">
            <input type="radio" name="payment-type" value="<?php echo $this->__('Betale med faktura') ?>" id="payment-with-faktura" class="css-checkbox" <?php if ($ba->getMethodCode() != 'payex2'): ?> checked <?php endif; ?> >
            <label for="payment-with-faktura" class="css-radio-label"></label>
            <input type="button" name="payment-with-faktura" id="payment-with-faktura" value="<?php echo $this->__('Betale med faktura') ?>" class="bottom-payment-buttons" />
            <div class="row">
                <ul>
                    <li class="row">
                        <div id="billing-submit" style="display: none;">
                            <input type="reset" name="submit-cancel" id="billing-cancel" value="AVBRYT" class="btn-grey" />&nbsp;&nbsp;
                            <input type="submit" name="submit-payment" id="submit-payment" value="<?php echo $this->__('Bekreft') ?>" class="btn-green" />
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </form>
</div>

【问题讨论】：

你的一些工作代码会很高兴看到

@DexterHuinda 根据您的要求添加了代码。当前存在的 JS 没有与这些收音机相关的任何操作，所以我认为这与此无关。

【参考方案1】：

如果没有看到所有代码，很难判断是否以不同的方式处理会更好，例如：

使用一个选项卡集，每个表单位于不同的选项卡上。 使用单个表单，但根据单选按钮更改表单的操作。

如果你真的想使用两个带有单选按钮的表单，你要么必须将单选按钮放在表单之外，要么自己处理选择/取消选择。

---

(1) 将单选按钮放置在表单之外。

html：

<label><input type="radio" name="formSelect" value="#form1" checked="checked"/>Form 1</label>
<form id="form1" class="form">
    <input type="text"/>
</form>
<label><input type="radio" name="formSelect" value="#form2"/>Form 2</label>
<form id="form2" class="form">
    <input type="text"/>
</form>
<button type="button" id="submitBtn">Submit</button>

JQuery:

$('#submitBtn').click(function() 
    var $form = $($('input[name=formSelect]:checked').val());
    alert('submitting form: ' + $form.attr('id'));
    //$form.submit();
);

jsfiddle

---

(2) 自己处理选择/取消选择/。

HTML：

<form id="form1" class="form">
    <label><input type="radio" class="formSelect" checked="checked"/>Form 1</label>
    <input type="text"/>
</form>
<form id="form2" class="form">
    <label><input type="radio" class="formSelect"/>Form 2</label>
    <input type="text"/>
</form>
<button type="button" id="submitBtn">Submit</button>

JQuery:

$('.formSelect').change(function() 
    $('.form').not($(this).closest('form')).find('.formSelect').prop('checked', false);
);
$('#submitBtn').click(function() 
    var $form = $('.formSelect:checked').closest('form');
    alert('submitting form: ' + $form.attr('id'));
    //$form.submit();
);

jsfiddle

【参考方案2】：

真的，即使 OP 明确提到了偏好，也没有香草 JS 答案？ 就这么简单：

var options = document.getElementsByName('mygroup'); 
document.body.addEventListener('click', function(e) 
  if (e.target.name === 'mygroup') 
    for (var i = 0; i < options.length; i++)
      options[i].checked = false;
    e.target.checked = true;
  
, false);

在这里查看：http://jsbin.com/mefibi/1/edit?html,js,output

【参考方案3】：

这些答案中的大多数几乎都在那里，实际上提供了一条正确方向的路径..

由于表单代码比我发布的示例复杂得多，以下是实际实现：

$('#payment-with-faktura').on('click', function()
        $('#payment-with-card').removeAttr("checked");
        $('.billing-address-list input').each(function() 
            $(this).attr(
                'disabled': 'disabled'
            );
        );
        $(".col-order-12").slideDown(300);
        $(".prepaid-extra-method2").slideDown(300);
        if (validateBillingAddress()) 
            $(".payment-button-submit").removeAttr("disabled");
         else 
            $(".payment-button-submit").attr("disabled", "disabled");
        
    );

    $('#payment-with-card').on('click', function()
        $('#payment-with-faktura').removeAttr("checked");
        $("#payment-details-form").find('input[type="text"]').val("");  
        $(".prepaid-extra-method2").slideUp(300);
        $(".col-order-12").slideUp(300);
        if (validateBillingAddress()) 
            $(".payment-button-submit").removeAttr("disabled");
         else 
            $(".payment-button-submit").attr("disabled", "disabled");
        
    );

【讨论】：

从所有答案中，这个回答标题的问题最少。请接受最能回答您原始问题的答案，或者改写您的原始帖子并接受您自己的答案。由于您更喜欢非 jQuery 解决方案并且这是一个“仅 jQuery”的答案，因此请同时从原始帖子中删除该句子。也许阅读how to ask questions on SO

【参考方案4】：

如果我理解正确的话，在 2 个不同的表单中会有 2 个同名的单选框，并且一次只能选择一个单选框。实现此目的的一种可能方法如下：

var options = $('form input:radio');

options.click(function() 
  options.prop('checked', false);
  $(this).prop('checked', true);
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<form><input type="radio" name="opt"/></form>
<form><input type="radio" name="opt" /></form>

它基本上是清除所有“选择”状态并重新检查点击的状态