iCheck - Check the box by clicking a link

Question

I have iCheck checkbox right next to a SHARE link. Ideally the user ticks the box and then clicks Share link, but, sometimes they don't. How can I tick the box when they click the Share link?

<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>

Also, these are in repeater, there about 50 duplicate checkbox segments, same as I posted above, on the page, so not 1 to 1.

Answer 1

You can use pure JavaScript for this by just adding a click listener to your button that runs a function that will check the input box like this:

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>

With jQuery, the above JavaScript would look like this:

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

---

Multiple instances of checkbox+share:

Just wrapped all your checkbox + anchor tag pair within a common parent element like say, a <div> element and now you can just add a click listener to each anchor which in turn runs a function that uses the closest() method to get the common parent element from which you can retrieve and edit the checkbox within it.

Check and run the following Code Snippet for a practical example of the above approach:

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

Firstly, you need to listen on("click") event of sharelink.

After that, you can toggle checkbox click by using 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>