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

---

Несколько экземпляров checkbox + share:

Просто обернул все пары тегов checkbox + anchor в общий родительский элемент, например, скажем, a <div> элемента, и теперь вы можете просто добавить прослушиватель щелчков для каждого якоря, которое, в свою очередь, запускает функцию, которая использует метод closest () , чтобы получить общий родительский элемент, из которого вы можете извлечь и изменить флажок внутри it.

Проверьте и запустите следующий фрагмент кода для практического примера вышеупомянутого подхода:

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>

Answer 2

Во-первых, вам нужно прослушать on("click") событие sharelink.

. После этого вы можете переключать флажки, используя prop ("флажок", 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>