通过单击按钮从复选框单击触发功能

Question

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

Answer 1

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

Answer 2

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/

Answer 3

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

Answer 4

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.