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(.....

整合Geogoer VChecks插件

1 个答案: