jquery click event resetets check check check checkbox

Question

У меня есть элемент управления checkboxlist, в этом элементе управления я не могу каждый флажок, чтобы запускать событие всякий раз, когда на нем установлен флажок (вручную или программно). Html код, генерируемый CheckBoxList lloks что-то, как показано ниже:

<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 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, который делает сверхмощную работу для показа/скрытия дивы.

$(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(); 

Этот запрос также, кажется, ничего не делать

Мое требование простое: мне нужно про грамматически проверить/снимите флажок флажков, которые идентифицируются родительским идентификатором и значением управления CheckBox. После проверки/снятия отметки, элемент управления также должен запустить событие 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 
}); 

И это 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(); 
    }); 
}); 

вы можете увидеть сравнение между обоими. И больше не использовать inline js и css, когда это возможно. И старайтесь избегать использования таблиц, если это не для табличных данных, они, как известно, вызывают проблемы с производительностью.Прочитано this