Question

我有两个用于捕获传递/收集方法的复选框。

桌面可见的复选框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做到这一点？

Answer 1

最接近的方式（虽然不是很好 - 不是一个很好的实践同样的ids）。

请注意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>

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

1 个答案: