1

我有一个带有复选框的表格，当用户单击复选框时，会将某些内容复制到 div 中，因此用户知道他选择了什么。

但是，如果我取消选中并再次检查，那么它会再次复制到 div。

           //On every checkbow that is clicked
    var flag = false;
    $("#ctl00_PlaceHolderMain_myGrid input").change(function () {
        if (this.checked && flag === false) {
            var jobCode = $(this).parent().parent().parent().find("td:eq(2)").text()
            var jobName = $(this).parent().parent().parent().find("td:eq(1)").text()
            var displayvalue = jobCode.toUpperCase() + " - " + jobName.toUpperCase();
            //var removeDiv = $("#" + clientCode);

            //removeDiv.remove();         

            AddSelectedJob(jobCode, displayvalue);
            FillSelectedJobs();            
        }
    });

//Add selected job in the results div
function AddSelectedJob(id, display) {
    //create a div for every selected job
    $("[id$=ResultsDiv]").append('<div class="selectedjobs" id=' + id + '>' + display + '<a href="javascript:;" onclick="removeSelectedJob(this)">Remove selected job</a></div>');
}

//Removes the selected job from the resutls div
function removeSelectedJob(el) {
    $(el).parent().remove();
}

    function FillSelectedJobs() {

        //save values into the hidden field
        var selectedJobs = $("[id$=ResultsDiv]").find("[class$='selectedjobs']");
        var returnvalue = "";

        for (var i = 0; i < selectedJobs.length; i++)
            returnvalue += selectedJobs[i].id + ";";

        $("[id$=HiddenClientCode]").val(returnvalue);

    }

这是生成的html

<div>
            <div style="height: 300px; overflow: auto; float: left">
                <div>
        <table cellspacing="0" cellpadding="4" id="ctl00_PlaceHolderMain_myGrid" style="color:#333333;width:100%;border-collapse:collapse;">
            <tr style="color:White;background-color:#5D7B9D;font-weight:bold;">
                <th scope="col">&nbsp;</th><th scope="col">JobCode</th><th scope="col">JobName</th><th scope="col">JobPartner</th><th scope="col">JobManager</th><th scope="col">ClientName</th>
            </tr><tr style="color:#333333;background-color:#F7F6F3;">
                <td>
                                <input id="ctl00_PlaceHolderMain_myGrid_ctl02_CheckBox1" type="checkbox" name="ctl00$PlaceHolderMain$myGrid$ctl02$CheckBox1" />
                            </td><td>column1</td><td>column2</td><td>column3</td><td>column4</td><td>column5</td>
            </tr>
        </table>
    </div>
            </div>
            <div style="margin-top: 0px; margin-left: 10px; float: left">
                <span>Selected :</span>
                <div id="ResultsDiv" style="margin-top: 0px">
                </div>
            </div>

更新1：更清晰的解释：

I have a table with checkboxes, when a row is selected the job code and job name is copied to a div called results. 在那个 div 中，我创建了一个锚标记来删除 div 本身。单击删除选定作业链接时，再次单击复选框时，我应该能够从表中再次添加它。但是，如果所选作业已经在 div 结果中，我应该无法再次添加它。请在此处查看问题：单击动态创建的链接时删除 div

4

3 回答 3

1

为什么不只使用checked属性而不是取消绑定事件

var flag = false;
$("#ctl00_PlaceHolderMain_myGrid input").change(function () {
    if(this.checked && flag === false) {
         flag = true;  // set it to true so that it does 
                       // fire this block again
         // do something
    }
    else {
        // do something else
    }
});

或者

为了更简洁的方法，如果您希望事件在页面加载的整个生命周期内只触发一次，那么只需取消绑定事件

$(this).off('change')   // If using .on

编辑

如果上面的代码没有帮助，这应该可以

if (this.checked) {
   $(this).unbind('change');   // or //   $(this).off('change');
   AddSelectedJob(clientCode, displayvalue);
   FillSelectedJobs();
}
于 2013-06-03T06:59:45.743 回答
0

在AddSelectedJob您检查特定 div 的内容是否为空之前。

于 2013-06-03T07:09:52.093 回答
0

不要这样做。我会做什么。在每次单击复选框时，我将再次获得选中复选框的列表并将其显示在结果 div 中。

在您的情况下，您每次点击都会附加 DIV 。如果我多次检查，这将导致重复。

尽管如此，如果您想坚持这种模式，那么当您取消选中选中的复选框时，您必须从 ResultDiv 中删除条目。

如果您有任何疑问或困惑，请告诉我。

于 2013-06-03T07:10:16.610 回答