单击另一个复选框时更新一个复选框答案

【问题标题】：update one checkbox when clicking another单击另一个复选框时更新一个复选框
【发布时间】：2017-10-21 11:45:08
【问题描述】：

我有两个复选框用于捕获交付/收集方法。

对桌面可见的复选框 1：

<input type="radio" value="COLLECTION" id="coldelcheck1" name="coldelcheck1" 
class="icheck" checked onclick="coldel_pref()"  onchange="coldel_pref()" >
<input type="radio" value="DELIVERY" id="coldelcheck1" name="coldelcheck1" 
class="icheck" checked onclick="coldel_pref()"  onchange="coldel_pref()" >

对移动设备可见的复选框 2：

<input type="radio" value="COLLECTION" id="coldelcheck2" name="coldelcheck2" 
class="icheck" checked onclick="coldel_pref()"  onchange="coldel_pref()" >
<input type="radio" value="DELIVERY" id="coldelcheck2" name="coldelcheck2" 
class="icheck" checked onclick="coldel_pref()"  onchange="coldel_pref()" >

如果用户单击桌面版本，那么我希望选中相应的隐藏移动值，反之亦然。如果检查了桌面交付，那么我希望检查移动交付。如何使用 jquery/javascript 做到这一点？

【问题讨论】：

你尝试过什么@sidneyuk？请记住，StackOverflow 不是代码编写服务。您可能想了解如何制作minimal, complete, and verifiable question。
嗨 @AJFarmar，我尝试使用 onchange/onlick 触发器，但这些触发器甚至没有被调用。
请编辑您的问题，而不是在 cmets 中写入更多信息。此外，请编写您使用的代码，以便我们正确阅读。你读过如何制作minimal, complete, and verifiable question了吗？
@sidneyuk 添加您的 JS 代码，以便我们查看。另外，如果你知道如何解决这个问题，你为什么要问“我该怎么做”？很高兴您没有陷入潜在的错误方法，但这里的相关问题是，为什么不调用 onchange 处理程序。
我想我找到了问题所在。如果coldel_pref() 正在切换值，它将最终更改它们（onclick），然后立即更改它们（onchange）。您需要删除 onclicks。

标签： javascript jquery html checkbox

【解决方案1】：

最接近的方式（虽然不是很好 - 拥有相同的 id 不是一个好习惯）。

请注意this 作为函数调用的第一个参数。

function  coldel_pref(theRadio){

  var theOtherId = theRadio.id == 'coldelcheck1' ? '2' : '1';

  var theOtherDomId = "coldelcheck"+theOtherId;

  var theOtherSelector = 'input#'+theOtherDomId+'[type="radio"][value="'+theRadio.value+'"]';

  var e = document
            .querySelector(theOtherSelector)
            .checked = true;

}

<table border="0" cellspacing="5" cellpadding="5"><tr><th>Desktop</th><th>Mobile</th></tr><tr><td>
<input type="radio" value="COLLECTION" 
       id="coldelcheck1" name="coldelcheck1" class="icheck" checked 
       onclick="coldel_pref(this)"  onchange="coldel_pref(this)" /><input type="radio" value="DELIVERY" id="coldelcheck1" name="coldelcheck1" class="icheck" checked onclick="coldel_pref(this)"  onchange="coldel_pref(this)" /></td><td>
<input type="radio" value="COLLECTION" 
       id="coldelcheck2" name="coldelcheck2" class="icheck" checked 
       onclick="coldel_pref(this)"  onchange="coldel_pref(this)" /><input type="radio" value="DELIVERY" id="coldelcheck2" name="coldelcheck2" class="icheck" checked onclick="coldel_pref(this)"  onchange="coldel_pref(this)" /></td></tr>
</table>

更好更短的？

  function cpref(theRadio)
  {

    var specs = theRadio.id.split('-');

    specs[1] = specs[1] == 'mobile' ? 'desktop' : 'mobile';

    document.getElementById(specs.join('-')).checked = true ;

  }

<table border="0" cellspacing="5" cellpadding="5"><tr><th>Desktop</th><th>Mobile</th></tr><tr><td>

<input type="radio" value="COLLECTION" 
       id="rad-desktop-1" name="coldelcheck1" class="icheck"
       onclick="cpref(this)"  onchange="cpref(this)" />

<input type="radio" value="DELIVERY" 
       id="rad-desktop-2" name="coldelcheck1" class="icheck" 
       onclick="cpref(this)"  onchange="cpref(this)" /></td><td>

<input type="radio" value="COLLECTION" 
       id="rad-mobile-1" name="coldelcheck2" class="icheck"
       onclick="cpref(this)"  onchange="cpref(this)" />

<input type="radio" value="DELIVERY" 
       id="rad-mobile-2" name="coldelcheck2" class="icheck"
       onclick="cpref(this)"  onchange="cpref(this)" /></td></tr>

</table>

【讨论】：