Detect if checkbox is clicked or not using form wizard

Question

I am currently using a form wizard:

<form name="example-1" id="wrapped" action="" method="POST">
     <div id="middle-wizard">
           <div class="step">
           </div>
           <div class="step">
           </div>
           <div class="step">
                <div class="row">
                    <div class="col-md-6">
                         <ul class="data-list-2 clearfix">
                               <li><input name="information[]" id ="other_info" class="otherInfo check_radio" type="checkbox"  value="Others"><label>Others</label></li>
                         </ul>
                    </div>
                </div>
           </div>
     </div>


<div id="bottom-wizard">
            <button type="button" name="backward" class="backward"> Backward </button>
            <button type="button" name="forward" class="forward"> Forward </button>
</div>
</form>

I am trying to check if the checkbox is checked or not. First thing I did was to console log the id of the checkbox.

The console returns the checkbox but when I tried to create a click function on the checkbox id, the on click function doesn't throw a console log.

Here's the sample of the on click function I tried:

console.log('#other_info')
    $("#other_info").click(function(){
        if(!$(this).is(':checked'))
        {
            console.log('yes its checked')
        }
        else
        {
            console.log('no its not!!')
        }
    })

this form uses iCheck custom plugin for checkboxes so a normal click or change function will not work. done fixing the problem by using the custom function provided from ichecked

The event is working as expected when clicking:) – Mamun Apr 22 '19 at 05:55 — Mamun, Apr 22 '19 at 05:55

score 0 · Answer 1 · edited Nov 30 '19 at 16:53

0

You shouldn't use click listener in such case, but the change listener. I believe it's much more efficient to use.

Here is a code snippet as a quick takeaway (working Fiddle):

document.querySelector('#wrapped').addEventListener('change', function(event) { 
  const allClicked = this.querySelectorAll('input[type="checkbox"]:checked')
  console.log(allClicked)

  console.log(`Chief, I am clicked: ${event.target}!`) // Show what is currently being clicked
})

Also you can read more on the subject in my similar response here: How to count every checked checkboxes

Here's a more complex fiddle: https://jsfiddle.net/mkbctrlll/yak4oqj9/159/

Inside you have 3 possible ways to solve your issue. Hope this helps

edited Nov 30 '19 at 16:53

marc_s

732,580
175
1,330
1,459

answered Apr 22 '19 at 05:44

mkbctrl

113
6

the script you provide triggers when an input or dropdown is clicked but when i tried to clicked a checkbox it does not trigger.. – Lion Smith Apr 22 '19 at 05:54
Lion please be more specific, checbox is an input. Can you update your question with the snippet of your real HTML structure? – mkbctrl Apr 22 '19 at 05:57
Maybe you are having some custom made checkboxes there, that are using in example labels instead of system checkbox input? I need more viable data to help you. Too many possible options. Best if you could make a JSfiddle. If non of the above is possible, can you at least provide me a DOM screenshot? – mkbctrl Apr 22 '19 at 06:00
thats what im thinking also so im currently looking for the custom script for the checkbox since the onchange/onclick works on input text or select.. – Lion Smith Apr 22 '19 at 06:03
Then you should redefine your question, as it does not include asking about custom structure input. In normal case my answer should do the trick with ease. – mkbctrl Apr 22 '19 at 06:08

score 0 · Answer 2 · answered Apr 22 '19 at 05:51

0

Try using Change instead of click

   $('#other_info').change(function() {
        if(this.checked) {

             console.log('yes its checked')
        }
      else
         {
     console.log('no its not!!')
         }

    });

answered Apr 22 '19 at 05:51

Raghul Ramkish

5
4

score 0 · Answer 3 · answered Apr 22 '19 at 07:28

since my form is using a custom checkbox plugin a normal change/click function will not work.

didn't know that this form was using a custom checkbox plugin so i didn't include it on my first question.

so

instead of using this function:

$('#other_info').on('change', function(event) {
    var checkboxChecked = $(this).is(':checked');

    if(checkboxChecked) {
        alert("checked");      
    }else{
        alert("un-checked");
    }
});

i use this function instead:

$('#other_info').on('ifChanged', function(event) {
    var checkboxChecked = $(this).is(':checked');

    if(checkboxChecked) {
        alert("checked");
    }else{
        alert("un-checked");
    }
});

Detect if checkbox is clicked or not using form wizard

3 Answers3