javascript - JQuery 复选框值不起作用

Question

我创建了一个复选框 JQuery 插件，但是当我想在选中时获取复选框的值时，复选框值总是返回 false。我已取出该插件并在原始状态下使用该复选框，但在选中该复选框时仍然返回 false。

JavaScript

<小时/>

function DialogWindowDragMediaItems(userPageType, imageParams, idParams) {


idParams = idParams.replace(/~/g, "|")

var divBGContainer = $("<div/>");
var lengthVideos = imageParams.split("~").length - 1;


var divInfoText1 = $("<div/>"); ;
$(divBGContainer).append(divInfoText1);
$(divInfoText1).text("What would you like to do with the videos selected?");
$(divInfoText1).attr("class", "videosselecteddraginfo");


var checkBox1 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox1);
$(checkBox1).genCheckBox({ name: 'copymedia', text: 'Move and Copy', checked: true });
$(checkBox1).attr("id", "copymediamoveandcopy");

var checkBox2 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox2);
$(checkBox2).genCheckBox({ name: 'copymedia', text: 'Move and Delete' });




var buttonMove = GetDialogWindowButton("Move Items", "DestroyDialogWindowHideTransparent('DialogWindowDragMediaItemsAddID'); WebForm_DoCallback('MainPageControl1','dragmediatomedia~" + userPageType + "~" + idParams + "~' + $('#copymediamoveandcopy').is(':checked'),null,null,null,true)");

CreateGenericWindowDialog($(divBGContainer), "DialogWindowDragMediaItemsAddID", 500, "images/mainpage/dialogwindow/titleimageaddmedia.png", "Move Items", "Cancel", buttonMove, true);


}


function CreateGenericWindowDialog(content, id, width, imageUrl, title, buttonText, button, destroyAndHideTransparent) {

var divContainer = $("<div/>");
$("body").append(divContainer);
$(divContainer).attr("class", "divaddvideomediacontrolcontainer");
$(divContainer).attr("id", id);

var divInnerContainer = $("<div/>");
$(divContainer).append(divInnerContainer);
$(divInnerContainer).attr("class", "divaddvideomediainnercontrolcontainer");
$(divInnerContainer).css("width", width + "px");

var divTopLeftCornerContainer = $("<div/>");
$(divInnerContainer).append(divTopLeftCornerContainer);
$(divTopLeftCornerContainer).attr("class", "divgenericwindowtopleftcorner");

var divTopCenterCornerContainer = $("<div/>");
$(divInnerContainer).append(divTopCenterCornerContainer);
$(divTopCenterCornerContainer).attr("class", "divcentergenericwindow");
$(divTopCenterCornerContainer).css("width", width - 16 + "px");

var divTopRightCornerContainer = $("<div/>");
$(divInnerContainer).append(divTopRightCornerContainer);
$(divTopRightCornerContainer).attr("class", "divgenericwindowtoprightcorner");

var imageTitle = $("<img/>");
$(divTopCenterCornerContainer).append(imageTitle);
$(imageTitle).attr("class", "imagetitledialogwindow");
$(imageTitle).attr("src", imageUrl);

var divTitleContainer = $("<div/>");
$(divTopCenterCornerContainer).append(divTitleContainer);
$(divTitleContainer).attr("class", "divgenericwindowtitlecontainer");
$(divTitleContainer).text(title);

var divControlsContainer = $("<div/>");
$(divInnerContainer).append(divControlsContainer);
$(divControlsContainer).attr("class", "divgenericwindowcontrolscontainer");
$(divControlsContainer).css("width", width - 6 + "px");
$(divControlsContainer).append($(content));

var divBottomLeftCornerContainer = $("<div/>");
$(divInnerContainer).append(divBottomLeftCornerContainer);
$(divBottomLeftCornerContainer).attr("class", "divgenericwindowbottomleftcorner");

var divBottomCenterContainer = $("<div/>");
$(divInnerContainer).append(divBottomCenterContainer);
$(divBottomCenterContainer).attr("class", "divbottomcentergenericwindow");
$(divBottomCenterContainer).css("width", width - 16 + "px");

var divBottomRightCornerContainer = $("<div/>");
$(divInnerContainer).append(divBottomRightCornerContainer);
$(divBottomRightCornerContainer).attr("class", "divgenericwindowbottomrightcorner");

if (destroyAndHideTransparent) {
    $(divBottomCenterContainer).append(GetDialogWindowButton(buttonText, "DestroyDialogWindowHideTransparent('" + id + "')"));
}
else {
    $(divBottomCenterContainer).append(GetDialogWindowButton(buttonText, "DestroyDialogWindow('" + id + "')"));
}



if (button != null && button.length > 0) {
    $(divBottomCenterContainer).append(button);
}


CenterGenericControl(id);
$(divContainer).show();

}


function GetDialogWindowButton(text, linkCall) {

var linkCancel = $("<a/>");
$(linkCancel).attr("class", "linkgenericdialogbutton");
$(linkCancel).attr("href", "javascript:" + linkCall);
$(linkCancel).css("marginTop", 14 + "px");
$(linkCancel).css("marginRight", 10 + "px");

var divCancel = $("<div/>");
$(linkCancel).append(divCancel);
$(divCancel).attr("class", "divlinkaddmediaurlbuttontext");
$(divCancel).text(text);

return linkCancel;
}

JQUERY 复选框插件

<小时/>

(function($) {

$.fn.genCheckBox = function(settings) {

    var def = {

        height: 15,
        width: 15

    };

    settings = $.extend(def, settings)

    $(this).attr("name", settings.name);
    $(this).css("display", "none");

    $(this).prop("checked", settings.checked);


    var divContainer = $("<div style='clear:left;float:left;padding:10px;'/>");
    $(divContainer).insertAfter(this);

    var span = $("<span class='checkbox' style='float:left'/>");

    if (settings.checked) {
        $(span).css("background-position", "0px 17px");
    }
    else {
        $(span).css("background-position", "0px 0px");
    }

    $(divContainer).append(span);
    //$(span).attr("name", settings.name);

    var div = $("<div style='float:left;margin-left:10px;disply:block'/>");
    $(div).insertAfter(span);
    $(div).text(settings.text);

    $(span).click(function() {

        var position = $(this).css("background-position");

        if (position == '0px 0px') {

            $(".checkbox").css("background-position", "0px 0px");
            var el = document.getElementsByName(settings.name);

            for (var i = 0; i < el.length; i++) {

                var input = el[i];
                $(input).prop("checked", false);

            }

            $(this).css("background-position", "0px 17px");
            var checkBox = $($(this).parent()).prev();
            $(checkBox).prop("checked", true);
        }

    });


}



})(jQuery);

Answer 1

我将代码从按钮单击事件中分离出来，然后我可以从复选框中检索值。奇怪的是，我仍然不明白为什么它第一次不能工作。

function DialogWindowDragMediaItems(userPageType, imageParams, idParams) {


idParams = idParams.replace(/~/g, "|")

var divBGContainer = $("<div/>");
var lengthVideos = imageParams.split("~").length - 1;


var divInfoText1 = $("<div/>"); ;
$(divBGContainer).append(divInfoText1);
$(divInfoText1).text("What would you like to do with the videos selected?");
$(divInfoText1).attr("class", "videosselecteddraginfo");


var checkBox1 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox1);
$(checkBox1).genCheckBox({ name: 'copymedia', text: 'Move and Copy', checked: true, id: 'copymediamoveandcopy' });

var checkBox2 = $("<input type='checkbox'/>");
$(divBGContainer).append(checkBox2);
$(checkBox2).genCheckBox({ name: 'copymedia', text: 'Move and Delete' });




var buttonMove = GetDialogWindowButton("Move Items", "");

CreateGenericWindowDialog($(divBGContainer), "DialogWindowDragMediaItemsAddID", 500, "images/mainpage/dialogwindow/titleimageaddmedia.png", "Move Items", "Cancel", $(buttonMove), true);


//$(buttonMove).attr("href", "javascript:DestroyDialogWindowHideTransparent('DialogWindowDragMediaItemsAddID'); WebForm_DoCallback('MainPageControl1','dragmediatomedia~" + userPageType + "~" + idParams + "~' + $('#copymediamoveandcopy').is('checked'),null,null,null,true)");

$(buttonMove).attr("href", "javascript:MoveItemsClick('" + userPageType + "','" + idParams + "')");
}

function MoveItemsClick(userPageType, idParams) {

var booleanValue = $('#copymediamoveandcopy')[0].checked;
DestroyDialogWindowHideTransparent('DialogWindowDragMediaItemsAddID');
WebForm_DoCallback('MainPageControl1', 'dragmediatomedia~' + userPageType + '~' + idParams + '~' + booleanValue, null, null, null, true);
}