Jquery Check a checkbox when an element has a class

Question

Okay so my problem is that I have a table that contains 5 elements. One of the elements is a checkbox and another is an anchor. When I click the anchor it suppresses the default action and adds a class to the anchor. I have the attribute "data-name" equal to the name of the checkbox. I need to accomplish the following.

When I click on the anchor with the data attribute, I need the checkbox with the same name to be checked.

My code is below.

<script>
$(document).ready(function(){
var clicks= 0;
var DELAY=700;

$("a").on("click", function(e){
    e.preventDefault();
    if($(e.target).hasClass("selected")){
       $(e.target).removeClass("selected");
    } else {
        $(e.target).addClass("selected");
    }
    clicks++;  //count clicks
if($(e.target).hasClass("selected")){
            var data_name  = $(e.target).data('name');
    if($("input[name="+data_name+']').attr('name') === data_name)
        $('input[name='+data_name+']').find('input[name='+data_name+']').prop('checked', true);

}
    if(clicks === 1) {
        timer = setTimeout(function() {
        clicks = 0;  //after action performed, reset counter

     }, DELAY);
    } else {
        clearTimeout(timer);  //prevent single-click action
    window.location = $(event.target).attr("href");
        clicks = 0;  //after action performed, reset counter
    }
});
$("a").on("dblclick", function(e){
    e.preventDefault();  //cancel system double-click event
});
});
</script>

The table looks like the attached picture (it looks nicer than the code that is available). enter image description here

the example table row is the following

<?php
   // $files is the number of files in each directory.
   for($i=0; $i<$files;$i++){
?>
<tr>
    <td>
         <input type="checkbox" name="todelete<?= $i?>" value="404.shtml">
    </td>
    <td>
         <i class="fa fa-file-text-o center"></i>
    </td>
    <td>
         <a href="http://kregelbagel.com/404.shtml" value="" data-name="todelete">404.shtml</a>
    </td>
    <td>437</td>
    <td> bytes</td>
</tr>
<?php
    }
?>

I'm assuming JavaScript is required for the page....what's the purpose of the anchor if you're preventing default? Could you just switch that out with a label? Something like: jsfiddle.net/KMkjc (Or, if you plan to fallback, could you update the anchor to an icon to symbolize the link, and then use a label?) — Jack
– Jack, Commented Apr 3, 2014 at 3:28

Felix · Accepted Answer · 2014-04-03 03:26:01Z

1

Instead of getting data value, you can get the input element of first sibling of parent td of your clicked anchor and set the checked state to true:

$("a").on("click", function(e){
    e.preventDefault();
    $(this).toggleClass('selected');
    clicks++;  //count clicks
    if($(this).hasClass("selected")){      
        $(this).parent().siblings('td:first').find('input').prop('checked', true);
    }
    // Rest of your code here
});

You can also shorten your code using .toggleClass() instead of if and else statement.

answered Apr 3, 2014 at 3:26

Felix

38.2k8 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Austin Kregel Over a year ago

I ended up going with this solution. It worked flawlessly. AND you made my programming more efficient by mentioning .toggleClass(). Seriously you just got rid of like half of my script! :D Thanks so much!

Arun P Johny · Accepted Answer · 2014-04-03 03:30:29Z

There are still few bits that I didn't get, but try

$("a").on("click", function (e) {
    e.preventDefault();

    //use toggleClass to switch the class
    $(this).toggleClass("selected");

    clicks++; //count clicks
    if ($(this).hasClass("selected")) {
        //just use attribute equals selector to get the checkbox
        $('input[name=' + $(this).data('name') + ']').prop('checked', true);
    }
    if (clicks === 1) {
        timer = setTimeout(function () {
            clicks = 0; //after action performed, reset counter
        }, DELAY);
    } else {
        clearTimeout(timer); //prevent single-click action
        window.location = $(event.target).attr("href");
        clicks = 0; //after action performed, reset counter
    }
});

you can use .toggleClass() to toggle the presents of a class
to find an input element with the given name, use attribute equals selector

_{Disclaimer: Haven't tested, or looked at why the click or rest of the code is used}

Collectives™ on Stack Overflow

Jquery Check a checkbox when an element has a class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related