使用JQuery更改单独的单选按钮状态和运行相关功能

你所需要做的就是当这个单选组是yes时，将另一个单选组的值改为no，然后触发它的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);
    }
});

如果我理解正确的话。那么像这样的代码应该可以达到目的。

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

这里有一个提琴如果它http://jsfiddle.net/ccn8f84r/1/

下面是你想要的

$('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>

检查小提琴

使用if…Elseif和我给你的输入类型id =radio

工作:Demo

HTML:添加id的

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