如何通过检查另一个单选按钮来设置选中的单选按钮

Posted 2023-03-05

【中文标题】如何通过检查另一个单选按钮来设置选中的单选按钮

【英文标题】：how to set checked radio button by checking another radio button

【发布时间】：2014-04-16 20:33:56

【问题描述】：

我有 2 个单独的字段，每个字段有 4 个单选按钮。

字段 nr1 使用 jquery 未选中单选按钮，字段 nr2 默认选中第一个单选按钮。

我需要的是，如果在字段 nr1 中选中了一个单选按钮，那么它会在字段 nr2 中选中相同的单选按钮。

这是我的 html 的样子：

<p class="form-row form-row-wide validate-required" id="billing_piegadatajs_field"><label for="billing_piegadatajs" class="">Piegādes veids <abbr class="required" title="vajadzīgs">*</abbr></label><br>

<input type="radio" name="billing_piegadatajs" value="Pasta Stacija" class="radio" style="width:10%" checked="checked"><span for="billing_piegadatajs">Pasta Stacija</span><br>
<input type="radio" name="billing_piegadatajs" value="Post24" class="radio" style="width:10%"><span for="billing_piegadatajs">Post 24</span><br>
<input type="radio" name="billing_piegadatajs" value="Kurjerdienests" class="radio" style="width:10%"><span for="billing_piegadatajs">Kurjerdienests</span><br>
<input type="radio" name="billing_piegadatajs" value="Saņemt uz vietas" class="radio" style="width:10%"><span for="billing_piegadatajs">Saņemt uz vietas ( Saldū )</span>
</p>

<br>        

<tr class="shipping">
<th>Piegādes izmaksas</th>
<td>
    <ul id="shipping_method">
        <li>
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" checked="checked" class="shipping_method">
            <label for="shipping_method_0_flat_rate">Pasta Stacijas: <span class="amount">€&nbsp;3.50</span></label>
        </li>
        <li>
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_international_delivery" value="international_delivery" class="shipping_method">
            <label for="shipping_method_0_international_delivery">Post 24: <span class="amount">€&nbsp;3.50</span></label>
        </li>
        <li>
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_apg_shipping" value="apg_shipping" class="shipping_method">
            <label for="shipping_method_0_apg_shipping">DLW Kurjeris: <span class="amount">€&nbsp;9.00</span></label>
        </li>
        <li>
            <input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup" value="local_pickup" class="shipping_method">
            <label for="shipping_method_0_local_pickup">Uz vietas - Saldū (Bez maksas)</label>
        </li>
   </ul>



</td>
</tr>

我使用这个 jquery 在页面加载时取消选中字段 nr1 单选按钮。

jQuery(document).ready(function()
jQuery('#billing_piegadatajs_field')
jQuery('#billing_piegadatajs_field').find('input[name="billing_piegadatajs"]').each(function() 
jQuery(this).prop('checked', false);
);
);

这是jsfiddle的链接

【问题讨论】：

您需要为每个复选框单选指定不同的名称并使用 jquery 来检查它们

这种HTML标记是什么？？？请使用有效的 HTML 标记

这是 Wordpress / wooCommerce 使用的。我自己没有做这个标记。字段 nr1 是使用自定义字段插件创建的，字段 nr2 是用于选择运输方式的标准 wooCommerce 结帐字段。

我从来没有使用过 jquery 的经验。只告诉我该做什么，将帮助我归零。我需要示例或工作脚本。

别忘了标记为解决

【参考方案1】：

您可以通过多种方式实现这一目标

一种方法应该考虑两套收音机

你已经有 2 套了：

第一个共享类名'radio'

第二个共享类名“shipping_method”

逻辑

1) 在第一组的所有收音机上添加点击事件

2) 获取我们点击的订单排名

3) 对第二组中具有相同索引的单选按钮强制点击事件

// Track the click on the first set of radio
jQuery('.radio').on('click',function()

    // Get the element index , which one we click on
    var indx = jQuery(this).index('.radio');

    // Trigger a click on the same index in the second radio set

    jQuery('.shipping_method')[indx].click();
)

有 jsfiddle ：http://jsfiddle.net/MMJRk/21/

【讨论】：

先生，您救了一条命。我不知道为什么我第一次粘贴您的代码时它不起作用，但重新粘贴后，并非一切正常！非常感谢！

我的解决方案强制您在第一组和第二组之间具有相同的点击关系顺序。如果你想要更多的灵活性，我建议你阅读@OscarPaz 的答案，以及它下面的评论。祝你有美好的一天！

【参考方案2】：

首先，您需要找出选中了哪个框。以下链接可能会有所帮助。

In jQuery, how do I select an element by its name attribute?

然后您需要遍历下一个复选框，将每个框的值与您想要的值进行比较。当你找到你想要的。检查那个。 如何复选框的链接。

How to check a radio button with jQuery ?

【参考方案3】：

好吧，我不得不承认这不是获得你想要的东西的最理想方式。但它确实有效：http://jsfiddle.net/veritas87/MMJRk/25/

jQuery('p.form-row input[type=radio]').on('change', function () 
        var radioNumber = $(this).index('.radio');
        $("ul#shipping_method input[type=radio]:eq(" + radioNumber + ")").prop('checked', true);
    );

简而言之，当 p.form-row 中的单选按钮发生变化时，它将获取单击的单选按钮的索引，并将第二个单选按钮列表中的单选按钮设置为选中。

【讨论】：

由于某种原因，您的代码无法在我的网站上运行。它在 jsfiddle 中工作，但是当我将它粘贴到我的网站上时，它没有。 Frederic Nault 脚本有效。但是非常感谢您的帮助，我真的很感激。

【参考方案4】：

我已经更新了您的jsfiddle，现在可以使用了。

基本上，我为每个输入（及其对应项）分配了一个使用自定义数据属性 (data-index) 的索引。我将一个事件处理程序附加到第一组输入，并根据检查的索引，检查第二组中的正确单选按钮：

$('#billing_piegadatajs_field input[type="radio"]').on('change', function() 
   if (!this.checked) return;
   var index = this.getAttribute('data-index');
   $('#shipping_method input[data-index="' + index + '"]').prop('checked', true);
);

【讨论】：

jquery能找到索引时为什么要添加data-index？

嗯，对于初学者来说，它更快，因为您立即知道单选按钮的索引。其次，这样你就不用依赖他们的订单了。如果您想以不同方式排列第二组中的单选按钮怎么办？此外，按照我的方式，很容易将一对一关系更改为一对多（如果您更改复选框的单选按钮）。

很好的答案，你的方式几乎没有好处，我完全同意这些好处。我猜额外的数据索引使它更灵活。谢谢

我知道。我完全致力于自定义属性，它们使代码的命令性和声明性更少。

由于某种原因，您的代码在我的网站上不起作用。它在 jsfiddle 中工作，但是当我将它粘贴到我的网站上时，它没有。 Frederic Nault 脚本仍然有效。除了，是的，当字段 nr2 更改时，它不会更改字段 1。仅适用于 field1 到 field2。