javascript - iCheck - 通过单击链接选中该框

Question

“分享”链接旁边有 iCheck 复选框。理想情况下，用户会勾选该框，然后单击共享链接，但有时他们不会这样做。当他们点击共享链接时，我如何勾选该框？

<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 个重复的复选框段，与我上面在页面上发布的相同，所以不是 1 对 1。

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);
})

<小时/>

复选框+共享的多个实例:

只需将所有复选框 + anchor 标记对包装在一个公共(public)父元素中，例如 <div>元素，现在您只需向每个 anchor 添加一个单击监听器，该监听器又运行一个使用 closest() 的函数。方法来获取公共(public)父元素，您可以从中检索和编辑其中的复选框。

检查并运行以下代码片段以获取上述方法的实际示例:

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>