2013-10-24 51 views
0

我希望你能幫我解決我的問題。 這裏是我的示例代碼如何使用事件觸發器和自定義屬性獲取元素的子元素?

<input type="checkbox" data-attr="getAllChoices" /> 

<div id="parent"> 

    <div id="child1"> 
     <input type="checkbox" value="3"/>Choice A 
    </div> 

    <div id="child2"> 
     <input type="checkbox" value="5"/>Choice B 
    </div> 

    <div id="child3"> 
     <input type="checkbox" value="6"/>Choice C 
    </div> 

</div> 

場景:

如果如果用戶選中該複選框,所有的選擇也應進行檢查。 date-attr應該用於比較。如果它有一個值,它會調用父項的子項(複選框)並檢查一切。

到目前爲止,在我的js我有這個。但我不知道如何調用其他複選框。我知道的唯一方法是通過訪問子div調用複選框。

$("input[data-attr='checkAll']").on('change',function(){ 
    //no idea. . . . . 
}); 

通過我使用jQuery 1.5

+1

什麼是你想在你的複選框數據ATTR = 「getAllChoices」 呢? – progrAmmar

+0

將此用作驗證。如果它有值,請選中所有複選框。 – Jerielle

+0

@RochelleCanale它與你之前的問題有什麼不同? –

回答

2

我沒有看到data-check屬性的方式。因此,嘗試使用data-attr屬性:

$("input[data-attr='getAllChoices']").bind('change',function(){ 
     $('#parent').find('input[type=checkbox]').attr('checked', this.checked); 
}); 

如果你想避免在檢查物業使用attr(),您可以通過手動的複選框迭代:

$("input[data-attr='getAllChoices']").bind('change',function(){ 
    var isChecked = this.checked; 
    $('#parent').find('input[type=checkbox]').each(function(i, val){ 
     val.checked = isChecked; 
    }); 
}); 
+0

訪問他們說他們使用Jquery 1.5,所以他們必須使用'.attr('checked','checked')'而不是.prop – lemondrop

+0

對不起,我將編輯我的代碼。 – Jerielle

+1

我想你必須遍歷名爲'孩子'的div來獲取提問者試圖實現的內容。 – progrAmmar

1

試試這個,用於change方法jQuery的1.5:

$(document).ready(function() { 
    $('input[data-attr="checkAll"]').change(function() { 
      $('#parent').find('input[type=checkbox]').attr('checked', this.checked); 
      //OR 
      // $('#parent input[type=checkbox]').attr('checked', this.checked); 
    }); 
}); 

這裏是Demo

1

試試這個:

$("input[data-attr='getAllChoices']").bind('change', function() { 
    $('#parent input[type="checkbox"]').attr('checked', this.checked) 
}); 
相關問題