Question

问题主要在标题中总结。

我正在使用accessible_custom_designed_checkbox_radio_button_inputs_styled_css_jquery/

中的自定义广播/复选框代码

这是他们代码的主旨（我修改了它以允许根据标签的标题定义不同的样式）

$(this).each(function(i){   
        if($(this).is('[type=radio]')){
            var input = $(this);

            // get the associated label using the input's id
            var label = $('label[for='+input.attr('id')+']');


            var labelTitle = label.attr('title');

            // wrap the input + label in a div that has class "custom-radio-LabelTitle"
            $('<div class="custom-radio-' + labelTitle + '"></div>').insertBefore(input).append(input, label);


            // find all inputs in this set using the shared name attribute
            var allInputs = $('input[name='+input.attr('name')+']');


            //bind custom event, trigger it, bind click,focus,blur events                   
            input.bind('updateState', function(){   
                if (input.is(':checked')) {
                    if (input.is(':radio')) {               
                        allInputs.each(function(){
                            $('label[for='+$(this).attr('id')+']').removeClass('checked');
                        });     
                    };
                    label.addClass('checked');
                }
                else { label.removeClass('checked checkedHover checkedFocus'); }

            })
            .trigger('updateState')
            .click(function(){ 
                $(this).trigger('updateState'); 
            })
        }
    });

根据我的理解，他们的代码基本上找到所有无线电输入，然后定义一个名为 updateState 的特殊触发器。然后他们在输入的点击功能中触发它。

因此，每次单击输入单选按钮时，updateState都会触发，从而为该单选按钮的标签设置一个类。更改类会更改标签的CSS。

单击标签时，还会单击标签所用的输入（运行JQuery的.click（）函数）。

我所做的是将所有输入的radiobuttons设置为 display：none 。这样，用户只需点击标签，并秘密地点击了一个单选按钮。

如果输入被隐藏，.click（）函数将不会为输入运行。

我认为有两种方式可以通过：

a）不要让收音机的.click（）函数触发句柄状态，而是让标签的.click（）函数处理它。这可能不会正常工作，因为那时单选按钮可能实际上没有被点击（这会弄乱我的表格）

b）单击标签时，手动触发无线电的点击功能。但是，这可能会导致它在每个浏览器中被触发两次但IE。我不知道如何引用标签的收音机，也不知道如何阻止其触发两次。

Answer 1

a）而不是收音机 .click（）函数触发器 handlestate，有标签的.click（）函数处理它。这可能虽然不行，但因为那时候单选按钮实际上可能不是点击（这会弄乱我的表格）

这可能正常，在你的标签上.click（）触发器也会强制单击这样的单选按钮，

$('#radiobutton').attr('checked', 'checked');

Answer 2

我得到了我想要的东西：

$("label[title='Plan']").click(function() {
    var id = $(this).attr('for')
    $("input[id='"+id+"']").trigger("click");
    $("input[id='"+id+"']").trigger("updateState");
    PlanChange();
});

然后删除所有onClicks。

如果display：none，则Internet Explorer不会触发click功能;

2 个答案: