Question

我希望在单击链接时检查特定的输入。有许多单选按钮的链接，我不知何故要使用变量，而不是为每个链接都使用一个函数。这可能吗？

目前这就是我所拥有的

function check117() {
    document.getElementById("option-i-117").checked = true;
 }
 function check118() {
    document.getElementById("option-i-118").checked = true;
}
function check119() {
    document.getElementById("option-i-119").checked = true;
}
function check120() {
    document.getElementById("option-i-120").checked = true;
}

<a class="option-i-117" onclick="check117()">Option 117</a>
<a class="option-i-118" onclick="check118()">Option 118</a>
<a class="option-i-119" onclick="check119()">Option 119</a>
<a class="option-i-120" onclick="check120()">Option 120</a>
        
<input type="radio" name="option[236]" id="option-i-117" value="117">
<input type="radio" name="option[236]" id="option-i-118" value="118">
<input type="radio" name="option[236]" id="option-i-119" value="119">
<input type="radio" name="option[236]" id="option-i-120" value="120">

但是我有50多个输入，所以理想情况下，我想在javascript中使用变量。

这可能吗？

Answer 1

您不需要多种功能。只需将this传递给函数，以便您可以在函数内部引用该函数以访问class中可以使用的getElementById()：

function check(el) {
  document.getElementById(el.getAttribute('class')).checked = true;
}

<a class="option-i-117" onclick="check(this)">Option 117</a>
<a class="option-i-118" onclick="check(this)">Option 118</a>
<a class="option-i-119" onclick="check(this)">Option 119</a>
<a class="option-i-120" onclick="check(this)">Option 120</a>

<input type="radio" name="option[236]" id="option-i-117" value="117">
<input type="radio" name="option[236]" id="option-i-118" value="118">
<input type="radio" name="option[236]" id="option-i-119" value="119">
<input type="radio" name="option[236]" id="option-i-120" value="120">

OR：：由于您有大量（> 50）个元素需要附加事件（click），因此无需附加手动操作，因此可以附加功能querySelectorAll()和addEventListener()的魔力：

document.querySelectorAll('a[class^=option-i-]').forEach(function(anchor){
  anchor.addEventListener('click', function check() {
    document.getElementById(this.getAttribute('class')).checked = true;
  });
});

<a class="option-i-117">Option 117</a>
<a class="option-i-118">Option 118</a>
<a class="option-i-119">Option 119</a>
<a class="option-i-120">Option 120</a>

<input type="radio" name="option[236]" id="option-i-117" value="117">
<input type="radio" name="option[236]" id="option-i-118" value="118">
<input type="radio" name="option[236]" id="option-i-119" value="119">
<input type="radio" name="option[236]" id="option-i-120" value="120">

Answer 2

您不需要javascript。

label, input {
  color: blue;
  cursor: pointer;}
label {
  display: inline-block;
  width:20vw;
  text-align:right;}
div {
  margin: 2em;}

<label for="option-i-117">Option 117</label>&nbsp;
<label for="option-i-118">Option 118</label>&nbsp;
<label for="option-i-119">Option 119</label>&nbsp;
<label for="option-i-120">Option 120</label>&nbsp;

<div>If you click on text up:</div>
<hr/>
<div>then here input change check status</div>

<label for="option-i-117">
  <input type="radio" name="option[235]" id="option-i-117" value="117">
  Option 117
</label>
<label for="option-i-118">
  <input type="radio" name="option[235]" id="option-i-118" value="118">
  Option 118
</label>
<label for="option-i-119">
  <input type="radio" name="option[235]" id="option-i-119" value="119">
  Option 119
</label>
<label for="option-i-120">
  <input type="radio" name="option[235]" id="option-i-120" value="120">
  Option 120
</label>

Answer 3

您可以将商品的序列号发送给功能：

<a class="option-i-117" onclick="check(117)">Option 117</a>
<a class="option-i-118" onclick="check(118)">Option 118</a>
<a class="option-i-119" onclick="check(119)">Option 119</a>
<a class="option-i-120" onclick="check(120)">Option 120</a>

<input type="radio" name="option[236]" id="option-i-117" value="117">
<input type="radio" name="option[236]" id="option-i-118" value="118">
<input type="radio" name="option[236]" id="option-i-119" value="119">
<input type="radio" name="option[236]" id="option-i-120" value="120">

然后，在函数中，将其添加到id模式：

function check(i){
      document.getElementById("option-i-"+i).checked = true;
 }

Answer 4

您可以为链接的父容器上的点击添加侦听器。这样，您只需将侦听器附加到单个DOM元素，例如body。

您可以检查在侦听器中单击了哪个元素。

$(function() {
  $('body').on('click', function(e) {
    var id = $(e.target).attr('class');
    $('#' + id).prop('checked', 'true');
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <a class="option-i-117">Option 117</a>
  <a class="option-i-118">Option 118</a>
  <a class="option-i-119">Option 119</a>
  <a class="option-i-120">Option 120</a>

  <input type="radio" name="option[236]" id="option-i-117" value="117">
  <input type="radio" name="option[236]" id="option-i-118" value="118">
  <input type="radio" name="option[236]" id="option-i-119" value="119">
  <input type="radio" name="option[236]" id="option-i-120" value="120">
</body>

根据点击Javascript中的链接选择广播输入

4 个答案: