Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Question jQuery Radio Buttons

    Hi all,

    I came across a script online which allows you to use pictures as radio buttons, but I am experiencing some issues with it - I was unable to get in touch with the original developer so I thought I might try my luck on here.

    The issue I'm having is that I’m trying to use several sets of radio buttons on the same page, for example

    GROUP 1 – Button 1 – Button 2 – Button 3
    GROUP 2 – Button 1 – Button 2 – Button 3

    But, for some reason there is confliction in the sense that if I select any button in GROUP 1, and then select a button in GROUP 2, it deselects my option in GROUP 1.

    The 'name' attribute is different, as you can see, yet it still does the same:

    Code:
          
    <script type="text/javascript">$(document).ready(function(){$('#radios1').imageradio({hidden:false});$('#radios2').imageradio();$('#radios3').imageradio();});</script>
    <form method="POST">
    <div id="radios2">
    	  <input type="radio" value="green" name="group1" class="{src:'pfc/newgreenfade.png',checked:'pfc/newgreen.png',hover:'pfc/newgreen.png'}" checked="checked"/> 
          <input type="radio" value="yellow" name="group1" class="{src:'pfc/newyellowfade.png',checked:'pfc/newyellow.png',hover:'pfc/newyellow.png'}"/>
          <input type="radio" value="red" name="group1" class="{src:'pfc/newredfade.png',checked:'pfc/newred.png',hover:'pfc/newred.png'}"/>
          <input type="submit" value="Submit"/><br /><br />
    
    	  <input type="radio" value="green" name="group2" class="{src:'pfc/newgreenfade.png',checked:'pfc/newgreen.png',hover:'pfc/newgreen.png'}" checked="checked"/> 
          <input type="radio" value="yellow" name="group2" class="{src:'pfc/newyellowfade.png',checked:'pfc/newyellow.png',hover:'pfc/newyellow.png'}"/>
          <input type="radio" value="red" name="group2" class="{src:'pfc/newredfade.png',checked:'pfc/newred.png',hover:'pfc/newred.png'}"/>
          <input type="submit" value="Submit"/><br /><br />
        </div></form>
    The JS code is as follows:

    Code:
    (function($) {
        $.fn.watch = function(props, callback, timeout){
            if(!timeout)
                timeout = 10;
            return this.each(function(){
                var el = $(this),
                func = function(){
                    __check.call(this, el)
                },
                data = {
                    props: 	props.split(","),
                    func: 	callback,
                    vals: 	[]
                };
                $.each(data.props, function(i, prop) {
                    //data.vals[i] = el.css(data.props[i]);
                    data.vals[i] = el.attr(prop);
                });
                el.data(data);
                if (typeof (this.onpropertychange) == "object"){
                    el.bind("propertychange", callback);
                } else if ($.browser.mozilla){
                    el.bind("DOMAttrModified", callback);
                } else {
                    setInterval(func, timeout);
                }
            });
            function __check(el) {
                var data 	= el.data(),
                changed = false,
                temp	= "";
                for(var i=0;i < data.props.length; i++) {
                    //temp = el.css(data.props[i]);
                    temp = el.attr(data.props[i]);
                    if(data.vals[i] != temp){
                        data.vals[i] = temp;
                        changed = true;
                        break;
                    }
                }
                if(changed && data.func) {
                    data.func.call(el, data);
                }
            }
        };
    
    
    
      $.fn.imageradio = function(options) {
        var defaults = {
              hidden: true
            },
            opts;
        if (options != undefined) {
          opts = $.extend($.fn.imageradio.defaults, options);
        }else{
          opts =  defaults;
        }
        var $this = $(this),
            $radios = $this.find('input[type=radio]'),
            $imgRadios = [],
            $myRadios = [];
        return $radios.each(function() {
          var $this = $(this),
              thisChecked = $this.attr('checked'),
              thisClass = $this.attr('class'),
              json = eval('('+ thisClass +')'),
              src = json.src,
              checked = json.checked,
              disabled = json.disabled,
              hov = json.hover,
              tooltipText = $this.attr('title'),
              $imgRadio = $('<img src="'+ src +'" alt="'+ tooltipText +'" style="cursor: pointer" title="'+ tooltipText +'" />');
          $this.watch('disabled', function(){
              var disabled = $(this).attr('disabled'),
                  src = json.src,
                  d = json.disabled;
              $imgRadio.attr('src', disabled ? d || src : src);
          }, 300);
          $this.data({
            src: src,
            checked: checked,
            hov: hov
          });
          var change = function($radio, $img) {
            if ($radio.attr('disabled')) {
                return;
            }
            for (var i = -1, leni = $imgRadios.length; ++i < leni;) {
                var $imgRadio = $myRadios[i];
                if (!$imgRadio.attr('disabled')) {
                    $imgRadios[i].attr('src', $myRadios[i].data('src'));
                }
            }
            $radio.attr('checked',true);
            $img.attr('src', checked);
          };
          var imgChange = function() {
            var $img = $(this),
                $radio = $img.prev('input[type=radio]');
            change($radio, $img);
            $radio.trigger('change');
          };
          var radioChange = function() {
            var $radio = $(this),
                $img = $radio.next('img');
            change($radio, $img);
          };
          $imgRadio.click(imgChange);
          $this.click(radioChange);
          $imgRadio.data({
            radio: $this
          });
          $this.data('imgRadio', $imgRadio);
          $imgRadio.hover(function() {
            var $myRadio = $(this).data('radio');
            if ($myRadio.attr('disabled')) {
                return;
            }
            if (!$myRadio.attr('checked')) {
              $(this).attr('src',hov);
            }
          },function() {
            var $myRadio = $(this).data('radio');
            if ($myRadio.attr('disabled')) {
                return;
            }
            if (!$myRadio.attr('checked')) {
              $(this).attr('src',src);
            }
          });
          $this.after($imgRadio);
          if (opts.hidden) {
            $this.hide();
          }
          if (thisChecked) {
            $imgRadio.attr('src', checked);
          }
          $imgRadios.push($imgRadio);
          $myRadios.push($this);
        });
      };
    })(jQuery);
    Anyone have any ideas at all?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,225
    Thanks
    23
    Thanked 606 Times in 605 Posts
    Your first line:
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	$('#radios1').imageradio({hidden:false});
    	$('#radios2').imageradio();
    	$('#radios3').imageradio();
    	});
    </script>
    So where are those IDs that trigger this?
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    New Coder
    Join Date
    Nov 2012
    Posts
    14
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Your first line:
    Code:
    <script type="text/javascript">
    $(document).ready(function(){
    	$('#radios1').imageradio({hidden:false});
    	$('#radios2').imageradio();
    	$('#radios3').imageradio();
    	});
    </script>
    So where are those IDs that trigger this?
    See the HTML code - It's called just before the radio buttons begin

    Code:
    <div id="radios2">

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    looks like the way the script it written, each group will have to be in a separate container. The script doesnt appear to take grouping into account.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •