Javascript JQuery mobile自定义水平单选按钮在实际设备中不起作用

最近我问了一个关于Stackoverflow的问题，如何定制水平jQuery移动单选按钮您也可以从这个链接查看帖子。开发人员用非常好的JSFIDLE示例粗略地回答了这个问题。根据他的指示，我实现了定制的JQuery移动单选按钮，在桌面浏览器中运行良好

然而，当我在实际设备（GalaxyS2、iPhone5、Mac模拟器和Android模拟器）上检查时，发现它不像桌面浏览器那样工作。我不确定这里出了什么问题，但我可以理解，为了支持实际设备，我需要做一些小调整。我不擅长JS，因此，请任何人尽快研究一下

下面是前面的JSFiddle示例，由Gajotres

$（document）.on（'pagebeforeshow'，'#index'，function（）{
$（“”）.addClass（'checkBox'）.appendTo（'fieldset div div.ui-radio label'）；
$（'input[type=“radio”]”）。每个（函数（）{
（$（this）.is（':checked'））？$（this.next（）.find（“.checkBox”）.addClass（'checked'）：$（this.next（）.find（“.checkBox”）.addClass（'not-checked'）；
});
$（document）.on（'click'，'.ui-radio'，function（）{
$（'input[type=“radio”]”）。每个（函数（）{
$（this）.next（）.find（“.checkBox”）.addClass（'not-checked'）.removeClass（'checked'）；
});
if（$（this）.find（'input[type=“radio”]”）是（':checked'））{
$（this）.find（'label div.checkBox'）.removeClass（'checked'）.addClass（'not-checked'）；
$（this.find（'input[type=“radio”]）.attr（'checked'，false）；
}否则{
$（this）.find（'label div.checkBox'）.removeClass（'not-checked'）.addClass（'checked'）；
$（this.find（'input[type=“radio”]）.attr（'checked'，true）；
}        
});   
});
.复选框{
宽度：18px；
高度：18px；
背景#d9d9d9；
边界半径：3px；
保证金：0自动；
边缘底部：5px；
}
.未检查，.已检查{
背景图像：url（“http://www.fajrunt.org/icons-18-white.png");
背景重复：无重复；
}
.未检查{
背景位置：-18px 0；
背景色：#d9d9d9；
}
.检查{
背景位置：-720px 0；
背景色：#6294bc；
}

我创建了一个单独的链接，希望这将帮助您快速检查设备

---

*Stackoverflow仅供参考：我试图继续上一篇文章，但由于负责的开发人员无法回答或检查上一个问题，我创建了一篇新文章。你真的需要耐心，我在度假：）

下面是一个工作示例：

此版本应适用于触摸设备和桌面浏览器：

单击事件已更改为touchstart事件，现在它也可以在移动设备上工作

$(document).on('pagebeforeshow', '#index', function(){     
    $('<div>').addClass('checkBox').appendTo('fieldset div div.ui-radio label');
    $('input[type="radio"]').each(function(){        
        ($(this).is(':checked')) ? $(this).next().find(".checkBox").addClass('checked') : $(this).next().find(".checkBox").addClass('not-checked');
    });

    $(document).on('touchstart', '.ui-radio', function(){      
        $('input[type="radio"]').each(function(){  
            $(this).next().find(".checkBox").addClass('not-checked').removeClass('checked');
        }); 

        if($(this).find('input[type="radio"]').is(':checked')){
           $(this).find('label div.checkBox').removeClass('checked').addClass('not-checked'); 
           $(this).find('input[type="radio"]').attr('checked' , false);
        } else {
           $(this).find('label div.checkBox').removeClass('not-checked').addClass('checked');             
           $(this).find('input[type="radio"]').attr('checked' , true);
        }        
    });   
});

$（document）.on（'pagebeforeshow'，'#index'，function（）{
$（“”）.addClass（'checkBox'）.appendTo（'fieldset div div.ui-radio label'）；
$（'input[type=“radio”]”）。每个（函数（）{
（$（this）.is（':checked'））？$（this.next（）.find（“.checkBox”）.addClass（'checked'）：$（this.next（）.find（“.checkBox”）.addClass（'not-checked'）；
});
$（document）.on（'touchstart'，'.ui radio'，function（）{
$（'input[type=“radio”]”）。每个（函数（）{
$（this）.next（）.find（“.checkBox”）.addClass（'not-checked'）.removeClass（'checked'）；
}); 
if（$（this）.find（'input[type=“radio”]”）是（':checked'））{
$（this）.find（'label div.checkBox'）.removeClass（'checked'）.addClass（'not-checked'）；
$（this.find（'input[type=“radio”]）.attr（'checked'，false）；
}否则{
$（this）.find（'label div.checkBox'）.removeClass（'not-checked'）.addClass（'checked'）；
$（this.find（'input[type=“radio”]）.attr（'checked'，true）；
}        
});   
});

还有一条评论（以防将来有人碰到这个问题）-较新版本的JQueryMobile提供了“vclick”事件，这与在移动设备上查找“touch start”和在桌面浏览器上“click”是一样的。

谢谢！非常感谢。非常感谢。非常感谢。非常感谢你的帮助，mac，非常抱歉打扰你。此更新现在无法在桌面浏览器中工作，对吗？这是为了喜欢它，还是我们可以定义一个桌面和移动支持的事件？这个版本应该可以在触摸设备和桌面浏览器上工作：谢谢你，在你的回复中，我尝试了这个事件

$（文档）。在（'touchstart click'，'.ui radio'，函数（e）

，它在触摸设备和桌面浏览器中都可以正常工作。

$(document).on('pagebeforeshow', '#index', function(){     
    $('<div>').addClass('checkBox').appendTo('fieldset div div.ui-radio label');
    $('input[type="radio"]').each(function(){        
        ($(this).is(':checked')) ? $(this).next().find(".checkBox").addClass('checked') : $(this).next().find(".checkBox").addClass('not-checked');
    });

    $(document).on('touchstart', '.ui-radio', function(){      
        $('input[type="radio"]').each(function(){  
            $(this).next().find(".checkBox").addClass('not-checked').removeClass('checked');
        }); 

        if($(this).find('input[type="radio"]').is(':checked')){
           $(this).find('label div.checkBox').removeClass('checked').addClass('not-checked'); 
           $(this).find('input[type="radio"]').attr('checked' , false);
        } else {
           $(this).find('label div.checkBox').removeClass('not-checked').addClass('checked');             
           $(this).find('input[type="radio"]').attr('checked' , true);
        }        
    });   
});