缩短多个 div/复选框的 jQuery

发布于 2024-11-06 09:33:37 字数 680 浏览 0 评论 0原文

我编写了一个脚本，根据选中的复选框显示/隐藏 div。我在下面编写的代码工作正常，但是...

有没有办法缩短此代码，而不必为我需要添加的每个附加复选框/div 重复 if/else 语句？

$(function() {
    $("#submit_button").click(function(){
        if ($("input[value='poster1']:checked").val()){
            $("#results1").show();
        }
        else {
            $("#results1").hide();
        }
        if ($("input[value='poster2']:checked").val()){
            $("#results2").show();
        }
        else {
            $("#results2").hide();
        }
        if ($("input[value='poster3']:checked").val()){
            $("#results3").show();
        }
        else {
            $("#results3").hide();
        }

});

原文

I wrote a script that shows/hides a div depending on which checkbox is selected. The code I wrote below works fine, but...

Is there a way to shorten this code, without having to repeat the if/else statement for each additional checkbox/div I will need to add?

$(function() {
    $("#submit_button").click(function(){
        if ($("input[value='poster1']:checked").val()){
            $("#results1").show();
        }
        else {
            $("#results1").hide();
        }
        if ($("input[value='poster2']:checked").val()){
            $("#results2").show();
        }
        else {
            $("#results2").hide();
        }
        if ($("input[value='poster3']:checked").val()){
            $("#results3").show();
        }
        else {
            $("#results3").hide();
        }

});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蘸点软妹酱 2024-11-13 09:33:37

$("#submit_button").click(function() {
    $('input').each(function(i,el){
        var $el = $(el),
            num = $el.val().match(/poster(\d*)/)[1];
        if ($el.filter(':checked').length) {
            $('#results'+num).show();
        } else {
            $('#results'+num).hide();
        }
    });
});

演示→

$("#submit_button").click(function() {
    $('input').each(function(i,el){
        var $el = $(el),
            num = $el.val().match(/poster(\d*)/)[1];
        if ($el.filter(':checked').length) {
            $('#results'+num).show();
        } else {
            $('#results'+num).hide();
        }
    });
});

Demo →

回复收藏 0 原文

~没有更多了~