How to trigger click on links with the same class?


Tags: javascript,jquery,css

Problem :

I have a bunch of links on a page that I want to be clicked once a checkbox is checked off. Each of these links belong to the CSS class "batchClass".

How do I get these links to click once my checkbox is clicked? So far I have the basics of my JQuery function written, and it's going into the function but I can't get the links to fire.

function checkAll() {
    if ($('#checkbox').is(":checked")) {
          $('.batchClass').each(function () {
              $(this).trigger('click');
          });

    console.log("Inside the function.");
    }
}

Add this function is added to the checkbox in C# code..

CheckBox chkAllAccounts = new CheckBox();
chkAllAccounts.Attributes.Add("onclick", "javascript:checkAll()");

How these links are being built in the C#..

info[idx++] = "<a style=\"text-align:center;\" class=\"batchCheck\" id=\"verifiedLink_" + v.ID + "\" href=\"javascript:verifyStatement('" + v.ID + "', '0');\"><img id=\"verifiedState_" + v.ID + "\" src=\"/images/icons/box_checked.png\"></a>";

Could I just do a call to verifyStatement directly?



Solution :

This probably is not an answer yet, but if you can address our confusion, I can update this.

In this FIDDLE I've:

Tried to give an example of the functionality that you describe. I'm not sure why you need anchors to change a picture, so I've given you buttons, but anything visible could be used.

Shown two pictures, that when you click on the respective buttons, the pictures change, the buttons outline become green, and and id of 'active' is given.

Put in code so that when the checkbox is clicked, it clicks all of the buttons on the page.

Let's just see if this is the functionality that you want (visible evidence of "clicked" -add green border- and hidden evidence of "clicked" - add an id), and then we can go from there.

JS

$('.mycheckbox').on('change', function(){
                $('.sometypeoflink1').trigger('click');
                $('.sometypeoflink2').trigger('click');
});

$('.sometypeoflink1').on('click', function(){
    $('.batchclass1 img').remove();
    $('.hidden img:eq(0)').clone().appendTo('.batchclass1');
    $('.sometypeoflink1').css( 'border', '3px solid green');
    $('.sometypeoflink1').attr('id', 'active1');
    console.log( $('.sometypeoflink1').attr('id') );
});

$('.sometypeoflink2').on('click', function(){
    $('.batchclass2 img').remove();
    $('.hidden img:eq(1)').clone().appendTo('.batchclass2');
    $('.sometypeoflink2').css( 'border', '3px solid green');
    $('.sometypeoflink2').attr('id', 'active2');
    console.log( $('.sometypeoflink2').attr('id') );
});

    CSS Howto..

    How to make a graphic image responsive in css

    css selector question, how to change font colover of parent li when child ul is focused

    How to print the CSS stylesheet for PPI::HTML highlight? [closed]

    How do I go from fixed width to percentage width in a CSS stylesheet?

    How can I make it so the first element in a DIV has a different CSS to others?

    How to get sourcemaps working for React Css Modules?

    How to add class with data-attribute?

    How to set css styles with variables in rails if certain item is selected?

    How to prevent text overflow when using Angular UI Bootstrap

    css make img shown when hover a li

    CSS media queries [how to transform to hyperlinks via media queries]

    How to align the bottom of two left- and right aligned texts with bottom of parent container?

    how do i set the text that my json file is printing to screen i want to hide the text

    How to add elements to an specified position without influence of other elements?

    How to have only a vertical scroll bar on a div

    How to place Social media icons on right side of navbar

    how to make the title bar fixed

    How is Facebook's website front-end and it's right sidebar designed?

    CSS + Bootstrap: How to dynamically stretch subdiv width to fit container (with image)?

    How to increase padding in jQuery Columnizer, with fixed number of columns, without kicking the last column down to the next “row”

    How to change select element's background color when it's selected?

    How can Shake FilePatterns be used to minify JS and CSS files?

    How to override inline style dynamically?

    How to set two background color to one element in CSS?

    How to maximum size without exceed the size?

    How to transform simple CSS box

    How to correct checkbox position, when it is one the same page with jQuery UI input text?

    How to make a 3 column layout fill 100% width using pixel metric on 2 columns?

    Check this web optimization report - how can I fix it?

    multiple “HTML” tags in HTML file: how to separate CSS rules when classes and id's can be the same?