CODEWITHSUNDEEP
javascriptjqueryhtmlcss
DRB
DRB

Reputation: 653

Use JQuery To Change Seperate Radio Button State and Run Associated Function

The goal of this code is that when you change the Section Bar radio input to yes two things happen.

JS Fiddle Link

  1. The .bar div is shown
  2. The Section Foo radio button is changed to the No value and the .foo div is hidden

Additionally, would it be possible to have the reverse happen when the Section Bar is changed back to no. The .bar div gets hidden, the .foo section is shown, and the Section Foo button is set back to yes value.

Basically, the state of the second radio button effects the first button and runs the function it would if it was changed, but the first button does not effect the second when it is changed.

<form>
    <label>Section Foo</label>
    <input class="toggle" data-target=".foo" type="radio" name="enableFoo" value="yes" checked >Yes
    <input class="toggle" data-target=".foo" type="radio" name="enableFoo" value="no">No
</form>
<form>
    <label>Section Bar</label>
    <input class="enable" data-target=".bar" type="radio" name="enableBar" value="yes">Yes
    <input class="enable" data-target=".bar" type="radio" name="enableBar" value="no" checked>No
</form>
<div class="foo">Foo</div>
<div class="bar">Bar</div>

div {
    width: 500px;
    height: 200px;
}
.foo {
    display: block;
    background: red;
}
.bar {
    display: none;
    background: black;
}

$('.toggle').change(function () {
    var target = $(this).data("target"),
        element = $(this),
        name = element.val(),
        is_checked = element.prop('checked')

    if  (name == 'yes') {
        $(target).slideDown(300);
    } else {
        $(target).slideUp(300);
    }
});


$('.enable').change(function () {
    var target = $(this).data("target"),
        element = $(this),
        name = element.val(),
        is_checked = element.prop('checked')

    if  (name == 'yes') {
        $(target).slideDown(300);
        $( ".toggle" ).prop("checked", true) // this changes the .toggle check, but does not run the function, also I'm not sure if it will always set it to the value of no.
    } else {
        $(target).slideUp(300);
        $( ".toggle" ).prop("checked", true)
    }
});

Upvotes: 0

Views: 106

Answers (4)

divy3993
divy3993

Reputation: 5810

Little more simplified using if...elseif and i gave id's to your input type=radio

Working : Demo

HTML : Added id's 

<form>
    <label>Section Foo</label>
    <input id="1" class="toggle" data-target=".foo" type="radio" name="enableFoo" value="yes" />Yes
    <input id="2" class="toggle" data-target=".foo" type="radio" name="enableFoo" value="no" />No</form>
<form>
    <label>Section Bar</label>
    <input id="3" class="enable" data-target=".bar" type="radio" name="enableBar" value="yes" />Yes
    <input id ="4" class="enable" data-target=".bar" type="radio" name="enableBar" value="no" />No</form>
<div class="foo">Foo</div>
<div class="bar">Bar</div>

CSS : No Change

JS

$("input[type=radio]").click(function () {
    var curClass = this.className;
    var curValue = this.value;    

    if (curClass == "toggle" && curValue == "yes") {
       document.getElementById('4').checked = true;
       $(".bar").slideUp(300);
       $(".foo").slideDown(300);        
    }

    else if (curClass == "toggle" && curValue == "no") {
       document.getElementById('3').checked = true;
       $(".foo").slideUp(300);
       $(".bar").slideDown(300);  
    }

    else if (curClass == "enable" && curValue == "yes") {
       document.getElementById('2').checked = true;
       $(".foo").slideUp(300);
       $(".bar").slideDown(300);  
    }

    else if (curClass == "enable" && curValue == "no") {
       document.getElementById('1').checked = true;
       $(".bar").slideUp(300);
       $(".foo").slideDown(300);  
    }

});

Upvotes: 1

ketan
ketan

Reputation: 19341

Here following is what you want

$('input[type=radio][name=enableFoo]').change(function() {
     var target = $(this).data("target")
   if  ($(".toggle:radio:checked").val() == 'yes') {
        $(target).slideDown(300);
       $( ".enable" ).prop("checked", true).trigger('change')
    } else {
        $(target).slideUp(300);
    } 
    
});

$('input[type=radio][name=enableBar]').change(function() {
     var target = $(this).data("target")
    // alert($(".enable:radio:checked").val())
   if  ($(".enable:radio:checked").val() == 'yes') {
        $(target).slideDown(300);
       $( ".toggle" ).prop("checked", true).trigger('change')
    } else {
        $(target).slideUp(300);
    } 
    
});
div {
    width: 500px;
    height: 200px;
}
.foo {
    display: block;
    background: red;
}
.bar {
    display: none;
    background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <label>Section Foo</label>
    <input class="toggle" data-target=".foo" type="radio" name="enableFoo" value="yes" checked >Yes
    <input class="toggle" data-target=".foo" type="radio" name="enableFoo" value="no">No
</form>
<form>
    <label>Section Bar</label>
    <input class="enable" data-target=".bar" type="radio" name="enableBar" value="yes">Yes
    <input class="enable" data-target=".bar" type="radio" name="enableBar" value="no" checked>No
</form>
<div class="foo">Foo</div>
<div class="bar">Bar</div>

Check Fiddle

Upvotes: 1

Samurai
Samurai

Reputation: 3729

All you need to do is change the value of the other radio group to no when this one is yes and then trigger its change:

$('.toggle').change(function () {
    var foov = $(".toggle:checked").val();
    var target = $(this).data("target");

    if  (foov == 'yes') {
        $(target).slideDown(300);
        $('.enable[value="no"]').prop('checked', true).trigger('change');
    } else {
        $(target).slideUp(300);
    }
});
$('.enable').change(function () {
    var target = $(this).data("target"),
        element = $(this),
        name = element.val(),
        is_checked = element.prop('checked')

    if  (name == 'yes') {
        $(target).slideDown(300);
        $('.toggle[value="no"]').prop('checked', true).trigger('change');
    } else {
        $(target).slideUp(300);
    }
});

jsfiddle DEMO

Upvotes: 1

John Whish
John Whish

Reputation: 3036

If I understand correctly. Then something like this should do the trick.

jQuery(function($){
    var fooRadio = $(':input[name=enableFoo]'),
        barRadio = $(':input[name=enableBar]');

    function hideShow(el, show) {
        el = $(el);
        if (show) {
            el.slideDown(300);
        } else {
            el.slideUp(300);
        }

    }

    // bindings
    fooRadio.on('change', function(){
        var it = $(this),
            target = it.data('target');

        hideShow(target, it.val()==='yes');
    });
    barRadio.on('change', function(){
        var it = $(this),
            target = it.data('target'),
            active = it.val()==='yes';

        hideShow(target, active);
        if (active) {
            fooRadio.filter('[value=no]').click();
        }
    });
});

Here's a fiddle if it http://jsfiddle.net/ccn8f84r/1/

Upvotes: 1

Related Questions