integrating Geogoer VChecks Plugin

Question

Hi,

I’m integrating Geogoer VChecks Plugin into a page ( http://www.vaziuojam.lt/js/geogoer/jquery%5Fplugins/vchecks/index.html).

The plug-in restyles a column of check boxes. When user changes a checkbox I would like to display the checkbox value like this:

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

I can’t finger out how to integrate the two.

This the is plug-in script.

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

Given

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

You code would be

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

However, the :checkbox selector will probably be quite slow, so you may want to combine it with an element or id selector to speed it up.

Try:

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

Answer 2

Sorry about the code input.

I would like to show the result in a p or div like this (http://www.factoringcompare.com/test.asp)