Show form when checkbox is selected using icheck,js

382 views Asked by At

I am using icheck.js for fancy radio buttons and checkboxes. When I use them now its breaking the way my form used to work. I have a checkbox that when checked it should show a form but now when i check it nothing is happening. (Maybe because the actual checkbox it self is not being selected)

http://jsfiddle.net/75qmj037/6/

Any help with showing my form when the checkbox is selected would be greatly appreciated!

<div class="row">
    <div class="col-lg-12">
        <div class="form-group i-checks">
            <input type="checkbox" name="anotherSeller1" id="anotherSeller1" onchange="valueChanged1()" />
            <em>Check this box if there is another seller.</em>
        </div>
    </div>
</div>

<div name="Form2" id="Form2" style="display: none;">
test
</div>

JS

jQuery('input').iCheck({
  checkboxClass: 'icheckbox_square-blue',
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
});


function valueChanged1()
{
    if($('#anotherSeller1').is(":checked"))   
        $("#Form2").show();
    else
        $("#Form2").hide();
        $("#Form2 > .clearfix input:text").val("");
        $("#Form2 > select").val("");
        $("#anotherSeller2").prop("checked", false);
        $("#Form3").hide();
        $("#Form3 > .clearfix input:text").val("");
        $("#Form3 > select").val("");
        $("#anotherSeller3").prop("checked", false);
        $("#Form4").hide();
        $("#Form4 > .clearfix input:text").val("");
        $("#Form4 > select").val("");
        $("#anotherSeller4").prop("checked", false);
        $("#Form5").hide();
        $("#Form5 > .clearfix input:text").val("");
        $("#Form5 > select").val("");

}
1

There are 1 answers

6
mherzig On BEST ANSWER

Looks like this plugin doesn't actually check/uncheck the checkbox, it just keeps its own state. That's unfortunate. To work around this issue, use the events they provide:

jQuery('input').iCheck({
  checkboxClass: 'icheckbox_square-blue',
  radioClass: 'iradio_square-blue',
  increaseArea: '20%' // optional
}).on('ifChanged', valueChanged1);

Adding the event handler to the end makes it work. Or, don't use the plugin and just style it yourself using CSS.

NOTE: I would also swap out the <em> for <label>, it makes it much easier to click on the checkbox if the whole line is active.