HTML

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.

它会触发点击事件但也撤消1，所以它没用。

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

此查询似乎也无效

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

任何帮助都应该适用。

注意：我是这个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
});

这是demo。我删除了所有内联函数调用。我认为这是一种更简单的方式。

Answer 2

您是否考虑使用单选按钮而不是复选框？它们具有您尝试使用复选框实现的相同行为。我创建了fiddle

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

jquery click事件重置check复选框的属性

2 个答案:

HTML

JS