CODEWITHSUNDEEP
javascriptjquery
cmplieger
cmplieger

Reputation: 7351

Change input when div state changes

I have this div and this input:

<fieldset>
    <input/>
    <label></label>
    <div class="toggle_box">
        <div class="switch"></div>
    </div>
</fieldset>

I want the input to be checked when the state of <div class="switch"></div> changes:

<fieldset>
    <input checked="checked" />
    <label></label>
    <div class="toggle_box">
        <div class="switch" state="on"></div>
    </div>
</fieldset>

Any idea how I would do that using jQuery? Thank you :)

Upvotes: 1

Views: 399

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206078

Salut SnippetSpace!
I prepared here a JSFiddle D E M O

Hope this will help
ciao et bonne chance! :)

BTW,
I used:

$.fn.toggleChkBx = function() {
    if ($('.switch').attr('state') == 'on') { 
        $(this).attr('checked', !$(this).find(':input').attr('checked')); 
    }
}

And call it for Ex.:
$('.some_Element').click(function() {....

 $(this).parent().find(':input').toggleChkBx(); // RUN OUR fn

Upvotes: 1

hunter
hunter

Reputation: 63512

Based on your code: pastebin.com/rjWc9i6f

Whenever you're setting the div state to on, also check the box. It's really that simple. It would be easier for you to manage with a function:

function SetState($switch, on)
{
    $switch.attr("state", on ? "on" : "off");
    $switch.closest("fieldset").find("input:checkbox").attr("checked", on);
}

and call this function like so:

SetState($(".switch"), true);

or from the context of your .toggle_box div

SetState($(this).find(".switch"), true);

or using your target variable:

SetState(target, true);

Upvotes: 1

Related Questions