缩短多个 div/复选框的 jQuery

发布于 2024-11-06 09:33:37 字数 680 浏览 6 评论 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();
        }

});

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

蘸点软妹酱 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 →

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文