Javascript 带有JQuery UI警报的复选框

单击链接时，应在单击“以后下载”按钮时弹出对话框。它切换按钮的选中变量。然后关闭对话框按钮

我不熟悉Javascript和Jquery，不知道自己在做什么

    $(function download_box(checkbox) {
        // a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
        $( "#opener" ).click(function() {
            $( "#dialog-download" ).dialog( "open" );
            return false;
        });

        $( "#dialog-download" ).dialog({
            autoOpen: false,
            resizable: false,
            height:140,
            width:325,
            modal: true,
            buttons: {
                "Download Now": function() {
                    var mycheckbox1 = document.getElementById(checkbox);
                    if(mycheckbox1.checked){
                        box.checked=false;
                    }
                    else{
                        box.checked=true;
                    }
                    $( this ).dialog( "close" );
                },              
                "Download Later": function() {
                    $('#c2').prop("checked", true);
                    $( this ).dialog( "close" );
                },
                Cancel: function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });

---

我给了你所有的锚定标签一个opener类，然后我给锚定绑定了一个click函数，用于设置对话框上的选项。选项集主要是您希望在窗体上具有的按钮及其相应的功能。我使用这种方法是因为函数需要稍微动态一些，因此在最初创建对话框时无法声明它们。该按钮切换复选框，稍后下载按钮单击复选框并关闭对话框，最后关闭按钮仅关闭对话框

需要注意的是，每页应该只有一个元素具有给定的id，因此有9个锚定标记的id为opener会带来麻烦。同样使用jquery，将函数绑定到html元素上的事件非常容易，这是一种优于在html ie中内联附加函数的首选方法（onclick=download_框）

HTML

工作示例：
我喜欢这个部分：“我不知道我在做什么。”：D这是一个开始……让我们从小事做起，首先id应该是唯一的，所以id=“opener”7到8次是一个大问题。将id=“opener”切换到class=“opener”那么这里的问题到底是什么？请查看我的答案，如果合适的话，请接受，我相信我已经获得了您想要的功能。@LenielMacaferi成长的第一部分是知道您不知道感谢您的接受，很高兴我能提供帮助。如果您需要任何解释的代码，请告诉我。如果我还想让“立即下载”按钮提交表单，那么使用jqueryDosent提交表单的最佳方式是什么？似乎使用jqueryDosent提交表单
“立即下载”：function（）{$（checkbox）.prop（“checked”、！$（checkbox）.attr（“checked”））
$（“#dialog download”）.dialog（“close”）；$（“#forms”）.submit（）；}，@GeneralZero我可以帮你做这件事，但要到本周末，事情才开始。试着把你的问题贴在堆栈上
<div id="dialog-download" title="Download Now?">
    <p><span style="float:left; margin:0 7px 20px 0;"></span>Download the file now or later?</p>
</div>    
<form method="post" action="<?php echo $PHP_SELF;?>">
<a class="opener" href="#">db1.csv:</a>
<input id="c1" type="checkbox" name="download[]" value="db1.csv" /><br />
<a class="opener" href="#" >db2.csv:</a>
<input id="c2" type="checkbox" name="download[]" value="db2.csv" /><br />
<a class="opener" href="#" >db3.csv:</a>
<input id="c3" type="checkbox" name="download[]" value="db3.csv" /><br />
<a class="opener" href="#" >db4.csv:</a>
<input id="c4" type="checkbox" name="download[]" value="db4.csv" /><br />
<a class="opener" href="#" >db5.csv:</a>
<input id="c5" type="checkbox" name="download[]" value="db5.csv" /><br />
<a class="opener" href="#" >db6.csv:</a>
<input id="c6" type="checkbox" name="download[]" value="db6.csv" /><br />
<a id="opener" href="#">db7.csv:</a>
<input id="c7" type="checkbox" name="download[]" value="db7.csv" /><br />
<a class="opener" href="#">db8.csv:</a>
<input id="c8" type="checkbox" name="download[]" value="db8.csv" /><br />
<a class="opener" href="#" >db9.csv:</a>
<input id="c9" type="checkbox" name="download[]" value="db9.csv" /><br />
<input type="submit" value="submit" name="submit">
</form>

$(document).ready(function(){
    $("#dialog-download ").dialog({
        autoOpen: false,
        resizable: false,
        height: 140,
        width: 325,
        modal: true
    });
    $(".opener").click(function(){
        var that = this;
        var checkbox = $(that).next(":checkbox");

        $("#dialog-download").dialog("option", {
            buttons: {
                "Download Now": function(){
                    $(checkbox).prop("checked", !$(checkbox).attr("checked"));
                    $("#dialog-download").dialog("close");
                },
                "Download Later ": function(){
                    $(checkbox).prop("checked", true);
                    $("#dialog-download").dialog("close");
                },
                "Cancel": function(){
                    $("#dialog-download").dialog("close");
                }
            }
        });
        $("#dialog-download").dialog("open");
    });
});