Question

单击链接时，如果单击下载下载按钮，它将弹出对话框，切换按钮的已检查变量。然后关闭对话框按钮

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

Answer 1

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

有些事情需要注意，每页应该只有1个元素具有给定的id，因此有9个具有开启者ID的锚标签会遇到麻烦。同样使用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/

带有JQuery-UI警报的复选框

1 个答案: