jquery: radio button replacement and keyword matching

Question

I want to replace my radio buttons with images, here is my html which will be generated by the system,

<ul>
    <li><input type="radio" name="id" value="68135112" title="Default / Default Title / Small" class="button-replace-size"/></li>
    <li><input type="radio" name="id" value="70365102" title="Default / Default Title / Medium" class="button-replace-size"/></li>
    <li><input type="radio" name="id" value="70365152" title="Default / Default Title / Large" class="button-replace-size"/></li>
    <li><input type="radio" name="id" value="70365162" title="Default / Default Title / Extra Large" class="button-replace-size"/></li>
</ul>

I want the jquery script to check if the title text in radio input contains certain keywords or letters, then replace that radio button accordingly.

For instance, if it is found that radio button contains the keyword - 'Small', or 'small', or even 's', then replace this button with this <a> tag which will be styled in css into an image,

<a href="#" id="button-s" class="button-size hide-text" title="Click this to select size Small">S</a>

and this will be the same case if the keyword - 'Medium', or 'medium' is found...

here is the jquery that I am stuck at,

if ($(':contains("Small")',$this_title).length > 0)

below is the script I have come out so far...

  this.replace_element_radio_size = function(){

    /* radio button replacement - loop through each element */
    $(".button-replace-size").each(function(){

        if($(this).length > 0)
        {
            $(this).hide();
            var $this = $(this);
            var $this_title = $this.attr('title');

            if ($(':contains("Small")',$this_title).length > 0)
            {
                 $(this).after('<a href="#" id="button-s" class="button-size hide-text" title="Click this to select size Small">S</a>');


            }
        }
    }
}

please give me some ideas to make it... thanks.

Please see answer below - just a note $(':contains("Small") will select any node that contains text "Small" not every node which attributes contain the text. — Michal, Jan 14 '11 at 01:35

score 0 · Answer 1 · answered Jan 14 '11 at 01:31

0

You just need to do this

$('input[title*="Small"]').replaceWith("<img src=sample.jpg>")

This will replace all input element which title contains word "Small" with an image or to be more in line with your requirement

$('input[title*="Small"]').replaceWith('<a href="#" id="button-s" class="button-size hide-text" title="Click this to select size Small">S</a>')

answered Jan 14 '11 at 01:31

Michal

13,439
3
35
33

thank you. the problem is 'Large' and 'Extra Large' will output the same image-replacement which is the 'Large' image replacement. how can I match the keyword exactly? – Run Jan 14 '11 at 01:47
yes you can use $('input[title~="XLarge"]'). (you will need to change the attribute) This will match whole word delimited by spaces on either side. More info here http://api.jquery.com/attribute-contains-word-selector/. Personally I would not use title but a class attribute for this replacement. You could have
and your selector would be nicer: $(".size-small").replaceWith(...)
– Michal Jan 14 '11 at 02:09

mekwall · Accepted Answer · 2011-01-14T02:23:41.150

0

Here's a solution using regular expressions to match the title and pick out the type:

$(function(){

    var replacement = $('<a href="#" class="button-size hide-text"></a>');

    $('input:radio').each(function(){
        var $this = $(this),
            type = $this.attr('title').match(/Default Title \/ (.+)$/);

        if (type.length > 1) {
            var shortType = type[1].substring(0,1).toLowerCase();
            $(this).replaceWith(
                replacement.clone()
                    .attr('id', 'button-'+shortType)
                    .attr('title', 'Click here to select '+type[1])
                    .text(shortType)
            );
        }
    });

});

You can see the above in action on jsFiddle.

edited Jan 14 '11 at 02:23

answered Jan 14 '11 at 01:43

mekwall

28,614
6
75
77

@lauthiamkok: no problem! I've updated it to add the proper ID and text, as I saw you asked Michal for that. – mekwall Jan 14 '11 at 01:53
@Marcus Ekwall: thanks so much for such a quick response! :) – Run Jan 14 '11 at 02:06
@Marcus Ekwall: sorry I have another problem just comes out! sometimes I have this title="Default / Default Title / Small" and sometime I might get this title="Default Title / Small" how can I fit these two possibilities in this line - .match(/^Default \/ Default Title \/ (.+)$/); ? thanks. – Run Jan 14 '11 at 02:11
@lauthiamkok: I've updated the example and the fiddle to allow this! – mekwall Jan 14 '11 at 02:24
@Marcus Ekwall: thanks so much for this. will have a look into details tomorrow. need to be off for bed now...! thanks. – Run Jan 14 '11 at 02:26

jquery: radio button replacement and keyword matching

2 Answers2