Question

我有一个带复选框的表格，当用户点击复选框时，会将某些内容复制到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：更明确的解释：

我有一个带复选框的表，当选择一行时，作业代码和作业名称被复制到名为results的div中。在那个div中，我创建了一个锚标记来删除div itselft。单击删除所选作业链接后，再次单击该复选框时，我应该能够再次从表中添加它。但是，如果所选作业已经在div结果上，我应该无法再次添加它。请在此处查看问题：Remove div on the click of a link that was created dynamically

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

Answer 2

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

Answer 3

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

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

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

如果您有任何疑问或疑惑，请与我们联系。

如果未选中复选框，则仅允许触发事件

3 个答案: