使用jQuery檢查父複選框

基本上我正在嘗試編寫一個js func，如果我檢查了子複選框，父複選框也會檢查，如果尚未檢查。我在這裏使用jQuery是我的html：使用jQuery檢查父複選框

 <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;"> 
      <li style="margin: 0 0 5px 0;"> 
       <input type="checkbox" checked="checked" class="liParent" id="p1" />Parent1 
       <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;"> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4 
        </li> 
       </ul> 
      </li> 

      <li style="margin: 0 0 5px 0;"> 
       <input type="checkbox" checked="checked" class="liParent" id="p2" />Parent2 
       <ul id="ulParent" style="margin: 0; padding: 0; list-style: none;"> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c1" onclick="checkParent(this);" />Child1 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c2" onclick="checkParent(this);"/>Child2 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c3" onclick="checkParent(this);"/>Child3 
        </li> 
        <li> 
         <input type="checkbox" checked="checked" class="liChild" id="c4" onclick="checkParent(this);"/>Child4 
        </li> 
       </ul> 
      </li> 
</ul>

JS Func鍵

function checkParent(child){ 

if (child != null) { 

    // if child is checked we need to check the parent category  
    if (child.checked) { 
    // get the parent checkbox and check it if not check....need help here.... 
      $(child).parent().parent().parent()...... 

     } 
    } 
}

來源

2010-01-22 Gabe

你爲什麼要設置試圖檢查父複選框，當CSS顏色？這只是爲了測試，看看選擇器是否工作？ – 2010-01-22 17:43:27

僅用於測試:) – Gabe 2010-01-22 17:47:44

您還需要更新輸入控件。你應該在其中有屬性type =「checkbox」。沒有這個，大多數瀏覽器都無法正常工作。例如，FF3會將您當前的標記顯示爲所有文本框，而不是複選框。 – 2010-01-22 17:56:17

我會刪除內聯的JavaScript在HTML和使用jQuery綁定來綁定檢查事件：

$(document).ready(function() { 
    $('input.liChild').change(function() { 
     if ($(this).is(':checked')) { 
      $(this).closest('ul').siblings('input:checkbox').attr('checked', true); 
     } 
    }); 
});

這會將您正在查找的事件綁定到類liChild的任何輸入，而無需使用所有這些onclicks。

來源

2010-01-22 17:47:40 Parrots

我認爲你想最親近，而不是父母。父母只會查找提升，而最接近的會繼續前進，直到找到選擇器。 – Mark 2010-01-22 17:52:29

是的，剛纔發現了，謝謝。 – Parrots 2010-01-22 17:54:42

*最近*或*父母*將工作，因爲*父母*獲得祖先，但*父*只是獲得父母，在這種情況下，父母不夠高。雖然這樣安排是個好主意。 – 2010-01-22 17:56:58

這將工作，根據您的結構：

$(child).parent().parent().prev().attr('checked', true);

或

$(child).closest('ul').prev().attr('checked', true);;

來源

2010-01-22 17:51:03

使用jQuery檢查父複選框

回答

相關問題