iCheck - 通过点击链接来选中复选框

Question

我在SHARE链接旁边放置了一个iCheck复选框。理想情况下，用户勾选该复选框然后点击Share链接，但有时他们不会这样做。如何让他们在单击Share链接时自动勾选该复选框？

<div class="input-group input-group-xs"><span class="input-group-addon"> 
<div class="icheckbox_square" style="position: relative;">
<input type="checkbox" name="share-item" rel="icheck" class="chk-share" style="margin: 0px; position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0;" value="9954">
<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0; cursor: pointer;"></ins>
</div> </span>
<span class="input-group-btn"><a href="javascript:void(0);" class="btn btn-default btn-xs sharelink" data-toggle="modal" data-href="/modal">Share</a></span></div>

此外，这些都在重复器中，页面上大约有50个重复的复选框部分，就像我之前发布的那样，所以不是一对一。

- devnuts

---

你目前尝试了什么？ - Nguyễn Văn Phong

Answer 1

您可以使用纯JavaScript实现此操作，只需将单击侦听器添加到按钮上，运行一个检查输入框的函数即可，代码如下：

const btn = document.querySelector(".sharelink");
const checkbox = document.querySelector(".chk-share");

btn.addEventListener("click", function() {
  checkbox.checked = true;
})

<input type="checkbox" name="share-item" rel="icheck" class="chk-share" value="9954">
<span class="input-group-btn"><a href="javascript:void(0);" class="btn btn-default btn-xs sharelink" data-toggle="modal" data-href="/modal">Share</a></span>

使用jQuery，上述JavaScript代码将如下所示：

$('.sharelink').click(function() {
  $('.chk-share').prop("checked", true);
})

多个复选框+共享功能：

只需将所有复选框和锚标签配对的元素放在一个公共父元素内，例如，一个<div>元素中，现在您可以为每个锚添加单击侦听器，然后运行一个使用closest()方法获取公共父元素的函数，从中可以检索并编辑其中的复选框。

查看下面的代码片段，了解上述方法的实际示例：

const btns = document.querySelectorAll(".sharelink");

btns.forEach(btn=> {
 btn.addEventListener("click", function() {
   const checkbox = btn.closest('div').querySelector(".chk-share");
   checkbox.checked = true;
 });
});

<div>
  <input type="checkbox" name="share-item" rel="icheck" class="chk-share" value="9954"><span class="input-group-btn"><a href="javascript:void(0);" class="btn btn-default btn-xs sharelink" data-toggle="modal" data-href="/modal">Share</a></span>
</div>

<div>
  <input type="checkbox" name="share-item" rel="icheck" class="chk-share" value="9954"><span class="input-group-btn"><a href="javascript:void(0);" class="btn btn-default btn-xs sharelink" data-toggle="modal" data-href="/modal">Share</a></span>
</div>

<div>
  <input type="checkbox" name="share-item" rel="icheck" class="chk-share" value="9954"><span class="input-group-btn"><a href="javascript:void(0);" class="btn btn-default btn-xs sharelink" data-toggle="modal" data-href="/modal">Share</a></span>
</div>

<div>
  <input type="checkbox" name="share-item" rel="icheck" class="chk-share" value="9954"><span class="input-group-btn"><a href="javascript:void(0);" class="btn btn-default btn-xs sharelink" data-toggle="modal" data-href="/modal">Share</a></span>
</div>

- AndrewL64

---

很抱歉，这不是一对一的关系。sharelink和chk-share重复出现了很多次。 - devnuts

@devnuts，我不明白你所说的一对一关系是什么意思。 - AndrewL64

意思是，页面上有许多.sharelink和.chk-share对象。 - devnuts

@devnuts，请查看我在答案中添加的第二个代码片段。 - AndrewL64

Answer 2

首先，您需要监听sharelink的on("click")事件。

之后，您可以使用prop( "checked", true )来切换复选框的点击。

$(".sharelink").on("click", function(){
    $(".chk-share").prop("checked", true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="input-group input-group-xs"><span class="input-group-addon"> 
<div class="icheckbox_square" style="position: relative;">
<input type="checkbox" name="share-item" rel="icheck" class="chk-share" style=" value="9954">
<ins class="iCheck-helper" style="position: absolute; top: -20%; left: -20%; display: block; width: 140%; height: 140%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px; opacity: 0; cursor: pointer;"></ins>
</div> </span>
<span class="input-group-btn"><a href="javascript:void(0);" class="btn btn-default btn-xs sharelink" data-toggle="modal" data-href="/modal">Share</a></span></div>

- Nguyễn Văn Phong

---

这个回答解决了你的问题吗？如果需要帮助，请告诉我 @devnuts - Nguyễn Văn Phong