自定义单选按钮-在IE中损坏

Custom Radio Buttons - broken in IE

本文关键字：损坏 IE 单选按钮 自定义      更新时间：2023-09-26

我正在使用jQuery自定义一些单选按钮。我有两种不同的单选按钮样式，所以你会看到两个if语句在寻找这两个不同的类。

我经常遇到的问题是，这个脚本在除了Internet Explorer之外的任何地方都能完美地工作。遗憾的是，我工作的公司已经将IE8列为所有网站的行业标准，所以一切都必须使用IE8。

我发给你，我的代码

单选按钮1 的HTML

<label class="label_radio-STD happy" for="happy3"><input id="happy3" name="q3" type="radio" value="YES"/></label>
<label class="label_radio-STD meh" for="meh3"><input id="meh3" name="q3" type="radio" value="INDIFFERENT"/></label>
<label class="label_radio-STD sad" for="sad3"><input id="sad3" name="q3" type="radio" value="NO"/></label>

单选按钮2 的HTML

<label class="label_radio" for="radio0">0<input id="radio0" name="q5" type="radio" value="0"/></label>
<label class="label_radio" for="radio1">1<input id="radio1" name="q5" type="radio" value="1"/></label>
><label class="label_radio" for="radio2">2<input id="radio2" name="q5" type="radio" value="2"/></label>

JQuery运行整个shaz机器人

<script>
    function setupLabel() {
        if ($('.label_check input').length) {
            $('.label_check').each(function(){
                $(this).removeClass('c_on');
            });
            $('.label_check input:checked').each(function(){
                $(this).parent('label').addClass('c_on');
            });                
        };
        if ($('.label_radio input').length) {
            $('.label_radio').each(function(){
                $(this).removeClass('r_on');
            });
            $('.label_radio input:checked').each(function(){
                $(this).parent('label').addClass('r_on');
            });
        };
        if ($('.label_radio-STD input').length) {
            $('.label_radio-STD').each(function(){
                $(this).removeClass('s_on');
            });
            $('.label_radio-STD input:checked').each(function(){ 
                $(this).parent('label').addClass('s_on');
            });
        };
    };
    $(document).ready(function(){
        $('label').click(function(){
            setupLabel();
        });
        setupLabel(); 
    });
</script>

我在每个IF语句上都抛出了ALERTS，结果都很好，我在each循环上抛出了ALERTS，结果很好。我曾经有一行jQuery"$（'body'）.addClass（"has-js"）"作为document.ready函数的第一行，但html正文从来没有has-js类。我进一步查看了代码，意识到我运行的代码并不需要它。但令我困扰的是$（'body'）.addClass（"has-js"）从未工作过。

它会像我的javascript for IE8被关闭一样简单吗？如果是，我能为任何可能关闭它的人强制打开它吗？

这是Murphy的坏代码。http://jsfiddle.net/GRstu/10/

注意小提琴input[type=radio]{display:none;}中的CSS行。单击标签时，该行将导致单选按钮不被选中/取消选中。IE就是这样工作的。当单击相应的标签时，您需要找到一个变通方法来检查隐藏的单选按钮。

您可以在点击事件中添加一行：

$('label').click(function() {
    $(this).children("input").prop("checked", true);  //This is the key
    setupLabel();
});

以下是解决方案的jsfiddle：http://jsfiddle.net/GRstu/11/

请注意，这与本问题中提出的解决方案和问题类似：Internet Explorer（和jquery）中的标签和隐藏字段

您可以在html中抛出<noscript>标记，以便在javascript关闭的情况下向用户显示消息，但您不能在网页中为他们启用它。

例如

<noscript> Enable javascript! </noscript>

但是，由于您处于企业环境中，您的系统管理员可以创建一个组策略，以便在所有用户的Internet Explorer设置中启用Javascript。

相关文章：