使用jquery在通过选中复选框选择的两个选项之间切换

Question

在我的应用程序中,我有一个视图,在某些情况下,我为用户提供了个人输入一些基本信息的能力.然而,这是动态完成的,所以我在我的.js文件中有功能,如果符合条件我做了这个:

$("#clientdata-container").append('<label>Private Client</label>...);

你可以在这个JS小提琴中看到这个问题的相关部分.

我想做的事.我希望能够在这两个optins该复选框提供,但从未允许他们俩在同一时间选择之间切换(切换).换句话说,如果您已经看过小提琴,如果Private Client选中了复选框,然后用户直接Company User选中我想要隐藏与之相关的html Private user的复选框,请取消选中复选框,然后显示html Company user.我一直在使用大量的if检查,但我觉得这个toggle()功能就是这样的情况,但我在实现它时遇到了问题所以我需要帮助才能使用切换来完成这项工作.当然,如果可能的话.

Answer 1

试试这个:你可以取消排除使用点击一个复选框.not(),使空clientdata-container,并填写,如果复选框被选中,否则离开它.

function showHideIndividualAttributes(sender) {
    $('input[type="checkbox"]').not(sender).prop('checked',false);
    $('#clientdata-container').empty();
    if (sender.checked) {
        $('#clientdata-container').append('<span>Private Client attributes</span>');
    } 
}

function showHideCompanyAttributes(sender) {
   $('input[type="checkbox"]').not(sender).prop('checked',false);
    $('#clientdata-container').empty();
    if (sender.checked) {
        $('#clientdata-container').append('<span>Company Client attributes</span>');
    } 
}

DEMO