javascript - jquery点击事件重置复选框的检查属性

Question

我有一个 checkboxlist 控件，在这个控件中，我不希望每个复选框在单击复选框时触发事件（手动或以编程方式）。checkboxlist 生成的 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>

我有一个 jquery 代码，它可以完成显示/隐藏 div 的繁重工作。

$(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.

它会触发 click 事件，但也会撤消 1，因此它是无用的。

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

这个查询似乎也什么都不做

我的要求很简单：我需要以编程方式选中/取消选中由父 ID 和复选框控件的值标识的复选框。选中/取消选中后，控件也应该触发 click 事件。

任何帮助都将不胜感激。

注意：我是这个 jquery 的新手，所以也欢迎对我的代码进行任何改进。

Answer 1

我认为您使用了太多代码。

检查这个：

$('input[type="checkbox"]').change(function () {
    var this_index = $(this).closest('tr').index(); //check the index of the tr of this input
    $("#divright > div").eq(this_index).show(); //show the div inside divright that has same index as this_index
});

还有这个演示。我删除了所有内联函数调用。我认为这是一种更简单的方法。

Answer 2

您是否考虑过使用单选按钮而不是复选框？它们具有您尝试使用复选框实现的相同行为。我创造了一个小提琴

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。如果不是用于表格数据，请尽量避免使用表格，因为它们会导致性能问题。读这个