自定义单选按钮-IE将杀死我 [英] Custom Radio Buttons - IE will kill me

问题描述

我正在使用jQuery定制一些单选按钮.我有两种不同的单选按钮样式，因此您将看到两个if语句在寻找这两个不同的类.

I am using jQuery to customize some radio buttons. I have two different radio button stylings so you will see two if statements looking for those two different classes.

我经常遇到的问题是，该脚本在Internet Explorer之外的所有环境中都能正常运行.不幸的是，我所服务的公司已将IE8称为所有网站的行业标准，因此所有发布的产品都可以与IE8一起使用.

The problem I'm running into CONSTANTLY, is that the script works perfectly in EVERYTHING but Internet Explorer. The company I work for, sadly, has denoted IE8 the industry standard for all websites, so everything that goes out HAS to work with IE8.

我将代码发送给您

单选按钮1的HTML

HTML for Radio Button 1

<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

HTML for Radio Button 2

<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>

运行整个shaz-bot的JQuery

JQuery to run the whole shaz-bot

<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，并且它们都很好，在每个循环中都抛出了ALERTS，它们也很好.我以前有一行jQuery"$('body').addClass(" has-js)"作为document.ready函数的第一行，但是html主体从没有一类has-js.我进一步查看了代码，发现我正在运行的代码不需要它.但是，仍然让我感到困扰的是$('body').addClass("has-js")从未起作用.

I thrown ALERTS on each IF statement, and they've come up good, I've thrown ALERTS on the EACH loops and they've come up good. I used to have a line of jQuery "$('body').addClass("has-js")" as the first line of the document.ready function, but the html body NEVER had a class of has-js. I further looked at the code, and realized I didn't need it for the code I was running. But it still bothers me that $('body').addClass("has-js") never worked.

就像关闭IE8的JavaScript一样简单吗? 如果是这样，我可以为可能将其关闭的任何人强制启用它吗?

Could it be as simple as my javascript for IE8 is turned off? If so, can I force it on for anyone who may have it turned off?

推荐答案

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

Here is the broken code from Murphy. http://jsfiddle.net/GRstu/10/

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

Note the CSS line in the fiddle input[type=radio]{display:none;}. That line will cause the radio button to not get checked/unchecked when the label is clicked. This is just how IE works. You will need to do a workaround to check the hidden radio when the corresponding label is clicked.

您可以通过在click事件中添加一行来做到这一点:

You can do that by adding a line to the click event:

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

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

Here is the jsfiddle of the solution: http://jsfiddle.net/GRstu/11/

请注意，这与此问题中提出的解决方案和问题类似: Internet Explorer(和jquery)中的标签和隐藏字段

Note that this is a similar solution and problem to that brought forward in this question: Labels and hidden fields in Internet Explorer (and jquery)

这篇关于自定义单选按钮-IE将杀死我的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！