Javascript 使用JS对dom中的元素进行优先级排序的逻辑

我做了这把小提琴：

HTML:

如果启用了“关于”，则单击任何其他复选框都不会产生任何效果。
同样，如果启用了

services

，则启用

products

不会产生任何效果，但启用

about

只会显示

about

如果全部打开，则仅显示

about

。
如果全部关闭，则不会显示任何内容

---

优先级阵列需要以某种方式集成，但我不知道如何集成。如果有人能帮我一些逻辑和集成阵列，那就太好了

你可以这样做。它还禁用不允许的复选框。这就是你想要的吗？
演示：

拨弄

要求数据id与优先级对象中的键相同，虽然不是很优雅，但它可以满足您的需要，我进一步确保在取消选中某个项（如果有）时，它会返回到下一个检查优先级最高的项

经过编辑，还表明优先级对象中有一个名为“highest”的额外键，用于确定初始边缘点，可以调用任何键，也可以用更好的机制替换

$(document).ready(function(){
    var priority = {'about':1, 'services':2, 'products':3, 'highest':4};
    var highest = priority['highest']
    var current = highest;
    $('input[type="checkbox"]').change(function(){
        var el = $(this).attr('data-id');
        if($(this).is(':checked')){
            if(priority[el] < current ){
               current = priority[el];          
               $('.feature').hide();             
               $('.feature#' + el).show();
            }
        } else {
            if(priority[el] == current){
               $('.feature#' + el).hide();
               var pNext= highest;
                var pNextName= "";
                $('input[type="checkbox"]').each(function(){
                    if($(this).is(':checked')){
                        var elNext = $(this).attr('data-id');
                        if(priority[elNext] < pNext){
                            pNext = priority[elNext];
                            pNextName= elNext;
                        }
                    }
                });

                current = pNext;
                if(current != highest && pNextName != ""){
                    $('.feature#' + pNextName).show();
                }
            }
        }        
    });              
});
​

$（文档）.ready（函数（）{
变量优先级={'about'：1，'服务'：2，'产品'：3，'最高'：4}；
var highest=优先级['highest']
无功电流=最高；
$（'input[type=“checkbox”]”）。更改（函数（）{
var el=$（this.attr（'data-id'）；
如果（$（this）.is（':checked'））{
if（优先级[el]<当前）{
电流=优先级[el]；
$（'.feature'）.hide（）；
$（'.feature#'+el.show（）；
}
}否则{
if（优先级[el]==当前）{
$（'.feature#'+el）.hide（）；
var pNext=最高；
var pNextName=“”；
$（'input[type=“checkbox”]”）。每个（函数（）{
如果（$（this）.is（':checked'））{
var elNext=$（this.attr（'data-id'）；
if（优先级[elNext]

请始终将相关信息（包括代码）直接包含在您的问题中。使用单选按钮如何？@chepe263这会有什么帮助？据我所知，您只需要打开一个复选框，关闭其余复选框。这真是太棒了！然而，禁用部分有点多余，因为我仍然需要知道他们已经检查了一个（对于表单），但是只显示检查了一个的最高优先级的html！

$(document).ready(function(){
    var priority = {'about':1, 'services':2, 'products':3};
    $('input[type="checkbox"]').change(function(){
        var el = $(this).attr('data-id');        
        if($(this).is(':checked')){                        
           $('.feature').hide();             
           $('.feature#' + el).show();
        } else {
           $('.feature#' + el).hide();    
        }
    });              
});

var features = ['about', 'services', 'products'],
    $inputs = $('input:checkbox'),
    $divs = $('.feature');

$inputs.change(function() {

    $inputs.prop('disabled', false);

    var name = $(this).attr('data-id'),
        idx = features.indexOf(name),
        arr = features.slice(idx + 1, features.lenght);

    if ($(this).is(':checked')) {
        $.each(arr, function(i, v) {
            $('input:checkbox[data-id="' + v + '"]').prop('disabled', true);
        });
        $divs.hide().eq(idx).show();
    } else {
        $divs.hide();
    }

});

$(document).ready(function(){
    var priority = {'about':1, 'services':2, 'products':3, 'highest':4};
    var highest = priority['highest']
    var current = highest;
    $('input[type="checkbox"]').change(function(){
        var el = $(this).attr('data-id');
        if($(this).is(':checked')){
            if(priority[el] < current ){
               current = priority[el];          
               $('.feature').hide();             
               $('.feature#' + el).show();
            }
        } else {
            if(priority[el] == current){
               $('.feature#' + el).hide();
               var pNext= highest;
                var pNextName= "";
                $('input[type="checkbox"]').each(function(){
                    if($(this).is(':checked')){
                        var elNext = $(this).attr('data-id');
                        if(priority[elNext] < pNext){
                            pNext = priority[elNext];
                            pNextName= elNext;
                        }
                    }
                });

                current = pNext;
                if(current != highest && pNextName != ""){
                    $('.feature#' + pNextName).show();
                }
            }
        }        
    });              
});
​