0

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

我是 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" );
                }
            }
        });
    });

<form method="post" action="<?php echo $PHP_SELF;?>">
   <a id="opener" href="#" OnClick="download_box('#c1')">db1.csv:</a>
   <input id="c1" type="checkbox" name="download[]" value="db1.csv" />
   <!-- ... -->
   <input type="submit" value="submit" name="submit">
</form>
4

1 回答 1

1

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

需要注意的一点是，每个页面应该只有 1 个具有给定 id 的元素，因此有 9 个 id 为 opener 的锚标签是自找麻烦。同样使用 jquery 很容易将函数绑定到 html 元素上的事件，这是在 html 中内联附加函数的首选方法，即（onclick=download_box）。

HTML

<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>

Javascript

$(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");
    });
});

工作示例：http: //jsfiddle.net/ccrAF/

于 2012-04-27T17:09:00.850 回答