javascript - jqueryクリックイベントは、チェックボックスのチェックプロパティをリセットします

Question

このコントロールでは、チェックボックスがクリックされるたびにすべてのチェックボックスでイベントを発生させたくありません (手動またはプログラムで)。チェックボックスリストによって生成された Html コードは、次のようになります。

<div id="divleft">
    <table id="MainContent_CheckBoxList1">
        <tbody>
            <tr>
                <td><input id="MainContent_CheckBoxList1_0" name="ctl00$MainContent$CheckBoxList1$0" onclick="router(this);" value="1" type="checkbox"><label for="MainContent_CheckBoxList1_0">Option1</label></td>
            </tr>
            <tr>
                <td><input id="MainContent_CheckBoxList1_1" name="ctl00$MainContent$CheckBoxList1$1" onclick="router(this);" value="2" type="checkbox"><label for="MainContent_CheckBoxList1_1">Option2</label></td>
            </tr>
            <tr>
                <td><input id="MainContent_CheckBoxList1_2" name="ctl00$MainContent$CheckBoxList1$2" onclick="router(this);" value="3" type="checkbox"><label for="MainContent_CheckBoxList1_2">Option3</label></td>
            </tr>
            <tr>
                <td><input id="MainContent_CheckBoxList1_3" name="ctl00$MainContent$CheckBoxList1$3" onclick="router(this);" value="4" type="checkbox"><label for="MainContent_CheckBoxList1_3">Option4</label></td>
            </tr>
        </tbody>
    </table>
</div>

チェックボックスをクリックすると、divが非表示または表示されます。div は次のようになります。

 <div id="divright">
    <div id="divoption1" style="display: none;">
        I am in option1 div
    </div>
    <div id="divoption2" style="display: none;">
        I am in option2 div
    </div>
    <div id="divoption3" style="display: none;">
        I am in option3 div
        </div>
    </div>
</div>

divを表示/非表示にするための重い作業を行うjqueryコードがあります。

$(document).ready(function () {
    RunOnce();
});

function uncheckAllCheckboxes(previouscheckedCheckboxValue, currentcheckedCheckboxValue) {
    if (previouscheckedCheckboxValue != null && previouscheckedCheckboxValue != currentcheckedCheckboxValue) {
        window.isRunOnce = 'false';
        $('[id$=divleft]').find('input:checkbox[value="' + previouscheckedCheckboxValue + '"]').prop('checked', false).click();
        //variable used to avoid infinite loop
        window.isRunOnce = null;
    }
    return currentcheckedCheckboxValue;
}

function router(control) {
    if (control.value == '1') {
        Option1Controller(control.value);
    }
    if (control.value == '2') {
        Option2Controller(control.value);
    }
    if (control.value == '3') {
        Option3Controller(control.value);
    }
}

function Option1Controller(currentCheckBoxValue) {
    if ($('[id$=divleft]').find('input:checkbox[value="' + currentCheckBoxValue + '"]').is(':checked') == true) {
        $('[id$=divoption1]').show();

        if (window.isRunOnce == null) {
            window.previouscheckBoxValue = uncheckAllCheckboxes(window.previouscheckBoxValue, currentCheckBoxValue);
        }

    }
    else {
        $('[id$=divoption1]').hide();
    }
}

function Option2Controller(currentCheckBoxValue) {
    if ($('[id$=divleft]').find('input:checkbox[value="' + currentCheckBoxValue + '"]').is(':checked') == true) {
        $('[id$=divoption2]').show();
        if (window.isRunOnce == null) {
            window.previouscheckBoxValue = uncheckAllCheckboxes(window.previouscheckBoxValue, currentCheckBoxValue);
        }
    }
    else {
        $('[id$=divoption2]').hide();
    }
}

function Option3Controller(currentCheckBoxValue) {
    if ($('[id$=divleft]').find('input:checkbox[value="' + currentCheckBoxValue + '"]').is(':checked') == true) {
        $('[id$=divoption3]').show();

        if (window.isRunOnce == null) {
            window.previouscheckBoxValue = uncheckAllCheckboxes(window.previouscheckBoxValue, currentCheckBoxValue);
        }
    }
    else {
            $('[id$=divoption3]').hide();
    }
}
function RunOnce() {
    Option1Controller('1');
    Option2Controller('2');
    Option3Controller('3');
}

問題は関数 uncheckAllCheckboxes にあります。この関数では、以前にチェックしたチェックボックスのチェックを外しています:

$('[id$=divleft]').find('input:checkbox[value="' + previouscheckedCheckboxValue + '"]').prop('checked', false);

上記のクエリは、対応するチェックボックスをオフにしますが、onclick イベントを発生させませんか?

$('[id$=divleft]').find('input:checkbox[value="' + previouscheckedCheckboxValue + '"]').click(); just after the above query.

クリックイベントを発生させますが、1を元に戻すため、役に立ちません。

$('[id$=divleft]').find('input:checkbox[value="' + previouscheckedCheckboxValue + '"]').prop('checked', false).click();

このクエリも何もしないようです

私の要件は単純です。親 ID とチェックボックスコントロールの値によって識別されるチェックボックスをプログラムでチェック/チェック解除する必要があります。チェック/チェック解除後、コントロールはクリックイベントも発生させる必要があります。

どんな助けも感謝しなければなりません。

注:私はこの jquery を初めて使用するので、コードの改善も歓迎します。

score 1 · Accepted Answer

チェックボックスの代わりにラジオボタンを使用することを検討しましたか? チェックボックスで達成しようとしているのと同じ動作をします。フィドルを作成しました

HTML

<label for="checkbox1">Div 1</label>
    <input type="checkbox" name="div" id="checkbox1" data-div-id="1">
<label for="checkbox2">Div 2</label>
    <input type="checkbox" name="div" id="checkbox2" data-div-id="2">
<label for="checkbox3">Div 3</label>
    <input type="checkbox" name="div" id="checkbox3" data-div-id="3">

<hr/>

<div id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>

<br/>

<label for="radio1">Div 4</label>
    <input type="radio" name="div" id="radio1" data-div-id="4">
<label for="radio2">Div 5</label>
    <input type="radio" name="div" id="radio2" data-div-id="5">
<label for="radio3">Div 6</label>
    <input type="radio" name="div" id="radio3" data-div-id="6">

<hr/>        

<div id="div4">DIV4</div>
<div id="div5">DIV5</div>
<div id="div6">DIV6</div>

JS

$(document).ready(function() {

    var checkboxes = $('input:checkbox'),
        radios     = $('input:radio'),
        divs       = $('div');

    // hide all divs
    divs.hide();

    checkboxes.change(function( e ) {
        var e = e || window.event,
            target = e.target || e.srcElement;

        $('#div' + $(target).data('div-id')).toggle();
    });

    radios.change(function( e ) {
        var e = e || window.event,
            target = e.target || e.srcElement;

        divs.hide();
        $('#div' + $(target).data('div-id')).toggle();
    });
});

両者の比較を見ることができます。また、可能な場合はインライン js と css を使用しません。また、表形式のデータでない場合は、テーブルの使用を避けてください。テーブルはパフォーマンスの問題を引き起こすことが知られています。これを読む

javascript - jqueryクリックイベントは、チェックボックスのチェックプロパティをリセットします

2 に答える 2

HTML

JS

Related

Reference