jquery每個或自定義複選框問題

HTML

<input type="checkbox" class="check" checked="checked" /> 
<input type="checkbox" class="check" />

JQUERY

$.fn.op_checkbox = function() { 
    $(this).hide(); 
    $(this).wrap('<div class="op_checkbox"></div>'); 
    $(this).parent().append('<div class="op_check_on_off">&nbsp;</div>'); 
    if($(this).is(':checked')) { 
     $('.op_check_on_off').addClass('op_check_on'); 
    } 
    else { 
     $('.op_check_on_off').addClass('op_check_off'); 
    } 
} 
$(document).ready(function() { 
    $('.check').op_checkbox(); 
});

結果

<div class="op_checkbox"> 
    <input class="check" type="checkbox" checked="checked" style="display: none;"> 
    <div class="op_check_on_off op_check_on">&nbsp;</div> 
</div> 
<div class="op_checkbox"> 
    <input class="check" type="checkbox" style="display: none;"> 
    <div class="op_check_on_off op_check_on">&nbsp;</div> 
</div>

第一個複選框的結果在第二個複選框被複制，其結果應該是：

<div class="op_checkbox"> 
    <input class="check" type="checkbox" checked="checked" style="display: none;"> 
    <div class="op_check_on_off op_check_on">&nbsp;</div> <!-- on here --> 
</div> 
<div class="op_checkbox"> 
    <input class="check" type="checkbox" style="display: none;"> 
    <div class="op_check_on_off op_check_off">&nbsp;</div> <!-- off here --> 
</div>

什麼是這種情況的原因和問題？感謝您的幫助

來源

2011-07-25 abra

試試這個

$.fn.op_checkbox = function() { 
    $(this).hide(); 
    $(this).wrap('<div class="op_checkbox"></div>'); 
    $(this).parent().append('<div class="op_check_on_off">&nbsp;</div>'); 
    if($(this).is(':checked')) { 
     $(this).parent().find('.op_check_on_off').addClass('op_check_on'); 
    } 
    else { 
     $(this).parent().find('.op_check_on_off').addClass('op_check_off'); 
    } 
} 
$(document).ready(function() { 
    $('.check').op_checkbox(); 
});

來源

2011-07-25 03:59:06 ShankarSangoli

@abra - 你試過我的回答，這已經解決了你的問題。 – ShankarSangoli

這不起作用。 '$（this）.is（'：checked'）'會檢查第一個複選框和$（this）.parent（）。find（'。op_check_on_off'）。addClass（'op_check_on'）;'將被調用爲兩個複選框同時。 –

它不會被調用，因爲$（this）.parent（）將控制它。 – ShankarSangoli

的this的功能op_checkbox()內部陣列狀的jQuery對象，所以你應該處理每一個對象，具有循環是這樣的：

$.fn.op_checkbox = function() { 
    this.each(function(){ 
     var $this = $(this); 

     $this.hide() 
      .wrap('<div class="op_checkbox"></div>') 
      .parent().append('<div class="op_check_on_off">&nbsp;</div>'); 

     if($this.is(':checked')) { 
      $this.parent().find('.op_check_on_off').addClass('op_check_on'); 
     } 
     else { 
      $this.parent().find('.op_check_on_off').addClass('op_check_off'); 
     } 
    });  
} 
$(document).ready(function() { 
    $('.check').op_checkbox(); 
});

我重構了一些代碼。

內fn功能，this已經是jQuery對象，所以你不必像包裹$(this)。
使用jQuery鏈。
緩存$(this)。這可以提高性能（雖然它有小的改進）。

來源

2011-07-25 03:59:11

我不認爲這已經解決了這個問題，因爲實際問題在於$（'。op_check_on_off'）選擇器。 @arba - 請檢查我的答案 – ShankarSangoli

哦，複製第一個元素類... – abra

@ShankarSangoli哦，我忘了解決這個問題。我將更新 –

我認爲在你的代碼中有兩個問題。 Sangdol幫助解決了$（this）範圍的問題，當您添加課程時，Shankar幫助解決了您的選擇問題。 http://jsfiddle.net/rkw79/DZYFN/

$('.check').each(function() { 
    $(this).hide(); 
    $(this).wrap('<div class="op_checkbox"></div>'); 
    $(this).parent().append('<div class="op_check_on_off">&nbsp;</div>'); 
    if($(this).is(':checked')) { 
     $(this).parent().find('div').addClass('op_check_on'); 
    } 
    else { 
     $(this).parent().find('div').addClass('op_check_off'); 
    } 
})

來源

2011-07-25 04:12:55 rkw

jquery每個或自定義複選框問題

回答

相關問題