Script

jQuery(function($){
    var img = 'images/radio.gif',
         img_on = 'images/radio_on.gif';
    $(':checked').removeAttr('checked');
    $('.radioImg input:radio').hide().after('<img src="' + img + '" />');
    $('.radioImg input:radio:hidden').next().click(function(){
        $('.radioImg :checked').removeAttr('checked');
        $(this).attr('src',img_on)
                .siblings().attr('src',img);
        $(this).prev().attr('checked','checked');
    });
    $('label').click(function(){
        $(this).prev().trigger('click');
    });
    /*以下おまけ*/
    $('button').click(function(){
        if($('[name="gender"]:checked').length > 0 && $('[name="gender2"]:checked').length > 0){
            alert('チェックされた値は「' + $('[name="gender"]:checked').val() + '」と「' + $('[name="gender2"]:checked').val() + '」');
        }else {
            alert('チェックされていない項目があります');
        }
    });
});

HTML

<table summary="ラジオボタンイメージ" id="formDemo">
    <tr>
        <td colspan="2" class="important">※両方をチェックしてください</td>
    </tr>
    <tr>
        <td>（イメージ利用）性別：</td>
        <td class="radioImg">
            <input type="radio" id="test1" name="gender" value="男性" /><label for="test1">男性</label>
            <input type="radio" id="test2" name="gender" value="女性" /><label for="test2">女性</label>
            <input type="radio" id="test3" name="gender" value="その他" /><label for="test3">その他</label>
        </td>
    </tr>
    <tr>
        <td>（デフォルト）性別２：</td>
        <td class="noImg">
            <input type="radio" id="test4" name="gender2" value="男性" /><label for="test4">男性</label>
            <input type="radio" id="test5" name="gender2" value="女性" /><label for="test5">女性</label>
            <input type="radio" id="test6" name="gender2" value="その他" /><label for="test6">その他</label>
        </td>
    </tr>
    <tr>
        <td colspan="2" class="check"><button>チェックされた値は</button></td>
    </tr>
</table>

Demo