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: より明確な説明:

行が選択されると、ジョブ コードとジョブ名が結果という div にコピーされます。その 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
    }
});

また

よりクリーンなアプローチとして、ページ読み込みの存続期間中にイベントを 1 回だけ発生させたい場合は、イベントのバインドを解除します。

$(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 に答える