jquery點擊事件重置複選框的檢查屬性

Question

我有一個checkboxlist控件，在這個控件中，我不想每個複選框在單擊複選框（手動或編程）時觸發一個事件。通過CheckBoxList的產生 HTML代碼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（S）。 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和CheckBox控件的值標識親語法檢查/取消選中複選框。檢查/取消選中後，控件也應該觸發點擊事件。

任何幫助應該appriciated。

注：我是新來的這個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