集成Geogoer VChecks插件

Question

我正在將Geogoer VChecks插件集成到頁面中（ http://www.vaziuojam.lt/js/geogoer/jquery_plugins/vchecks/index.html）。

該插件重新設置了一列複選框。當用戶更改複選框時，我想顯示覆選框的值如下：

<script> 
    $(document).ready(function(){ 
$(":checkbox").click(function(){ 
    $("#result").text(this.value) 
    }) 
    }); 
    </script> 



<input id="Calculator" type="checkbox" value="Hello" checked/> 
    <input id="Calculator1" type="checkbox" value="good bye" checked/> 
    <p id="result"></p> 

我不能指出如何整合這兩者。

這是插件腳本。

jQuery.fn.vchecks = function() { 

object = jQuery(this); 
object.addClass('geogoer_vchecks'); 
object.find("li:first").addClass('first'); 
object.find("li:last").addClass('last'); 
//removing checkboxes 
object.find("input[type=checkbox]").each(function(){ 
    $(this).hide(); 
}); 
//adding images true false 
object.find("li").each(function(){ 
    if($(this).find("input[type=checkbox]").attr('checked') == true){ 
    $(this).addClass('checked'); 
    $(this).append('<div class="check_div"></div>'); 
    } 
    else{ 
    $(this).addClass('unchecked'); 
    $(this).append('<div class="check_div"></div>'); 
    } 
}); 
//binding onClick function 
object.find("li").find('span').click(function(e){ 
    e.preventDefault(); 
    check_li = $(this).parent('li'); 
    checkbox = $(this).parent('li').find("input[type=checkbox]"); 
    if(checkbox.attr('checked') == true){ 
    checkbox.attr('checked',false); 
    check_li.removeClass('checked'); 
    check_li.addClass('unchecked'); 
    } 
    else{ 
    checkbox.attr('checked',true); 
    check_li.removeClass('unchecked'); 
    check_li.addClass('checked'); 
    } 
}); 

//mouse over/out 
//simple 
object.find("li:not(:last,:first)").find('span').bind('mouseover', function(e){ 
    $(this).parent('li').addClass('hover'); 
}); 
object.find("li:not(:last,:first)").find('span').bind('mouseout', function(e){ 
    $(this).parent('li').removeClass('hover'); 
}); 
//first 
object.find("li:first").find('span').bind('mouseover', function(e){ 
    $(this).parent('li').addClass('first_hover'); 
}); 
object.find("li:first").find('span').bind('mouseout', function(e){ 
    $(this).parent('li').removeClass('first_hover'); 
}); 
//last 
object.find("li:last").find('span').bind('mouseover', function(e){ 
    $(this).parent('li').addClass('last_hover'); 
}); 
object.find("li:last").find('span').bind('mouseout', function(e){ 
    $(this).parent('li').removeClass('last_hover'); 
}); 
} 

Answer 1

鑑於

<p id="MyP"></p> 
<input type="text" id="MyInput"> 

您的代碼將

$(document).ready(function(){ 
    $(":checkbox").click(function(){ 
     $("#MyP").text($(this).val()); 
     $("#MyInput").val($(this).val()); 
    }) 
}); 

然而，:checkbox選擇可能會比較慢，所以你可能需要將其與元素或id選擇相結合加快速度。

嘗試：

$("#custom_list :checkbox").click(.....