CODEWITHSUNDEEP
javascriptjqueryhtmlcheckbox
Shepherd
Shepherd

Reputation: 293

Trigger functions from checkbox on click by clicking on a button

I have a couple of checkboxes and a button. When I click on checkbox - function is triggered. This is the desired behavior but I want to trigger it by clicking on the button. I want to have the possibility to first select checkboxes (I tried with return false and event.preventDefault but these completely switch the selection off) and then by clicking the button - trigger functions from checkboxes. Here is a link to jsfiddle:

http://jsfiddle.net/j93k2xns/6/

So for instance: I can select 3 checkboxes (nothing should happen) and after I click the button - three alerts should appear.

The code:

HTML:

<input type="checkbox" name='check[]' id="first">first</input>
<input type="checkbox" name='check[]'>second</input>
<input type="checkbox" name='check[]'>third</input>
<input type="checkbox" name='check[]'>fourth</input>

<input type="button" value="validate" id="val-button">

JS:

var check_state;

$(document).on('click','input[name="check[]"]', function(e){
    if(check_state === true) {
        alert('a');
    } else {
         return false;   
    }

});
$(document).on('click','#val-button', function(){
   check_state = true; 
});

Upvotes: 0

Views: 2365

Answers (4)

SantanaRose
SantanaRose

Reputation: 1

I have a similar inquiry. I have a number of check boxes. Each checkbox is linked to a different URL that opens a PDF form. I want my team to be able to select which forms they need by ticking the checkbox. Once they have done that, I would like a button to trigger the opening of each form based on which check box is checked. I have it so the checkbox upon being checked opens the form right away but it is very distracting. Its preferable they all get opened at once by a "button". Help. I am quite new to JavaScript so may need additional clarity.

Upvotes: 0

zincorp
zincorp

Reputation: 3282

There are a few interpretations to his question. If I'm reading it correctly, he wants to bind an arbitrary function to the checkboxes. Clicking the button should fire this event. This is how you can achieve that using custom events in jQuery:

$(function () {
    $("input[name='check[]']").bind("myCustomButtonClick", function() { 
        if(this.checked) {
            alert('a');
        }
    });
})

$(document).on('click','#val-button', function(){
   $("input[name='check[]']").trigger("myCustomButtonClick");
});

And the associated jsfiddle: http://jsfiddle.net/3yf7ymos/

Upvotes: 1

Ant&#243;nio Regadas
Ant&#243;nio Regadas

Reputation: 724

If you want to do something when the user checks a checkbox, add an event listener:

$('input[type="checkbox"]').click(function() {

   if ($(this).is(':checked')) {
      // do something
   }
});

If the idea is run a couple of functions after the inputs are checked by clicking on a button:

function myFunction() {

    if ($('input[id="something"]:checked').length == 0) {
        // do something
    } else if ($('input[id="something_2"]:checked').length == 0) {
       // do something
    } 
//and so on..

}

$('#val-button').click(function() {

    myFunction();
});

Upvotes: 0

ltalhouarne
ltalhouarne

Reputation: 4638

$(document).on('click','#val-button', function(){
   $( 'input[name="check[]"]' ).each(function( index ) {
       if($(this).is(':checked')) {
           alert("a");
           return true;
       }
    });
});

Upvotes: 1

Related Questions