如何在除Internet Explorer之外的所有浏览器上隐藏单选按钮?

时间:2022-06-06 16:56:49

I've code like given below:

我的代码如下所示:

<label>
   <input type="hidden" name="styless" value="9">
   <input type="radio" style="display:none" >Qwerty
</label>

This is working fine on all browsers except Internet Explorer. How do I display the radio button in the IE browser, and make it remain hidden on other browsers?

这适用于除Internet Explorer之外的所有浏览器。如何在IE浏览器中显示单选按钮,并使其在其他浏览器中保持隐藏状态?

What happens in IE is when I click on "Qwerty", the click event is not fired. So i want to remove display:none in IE only.

在IE中发生的是当我点击“Qwerty”时,不会触发click事件。所以我想在IE中删除display:none。

2 个解决方案

#1


1  

Generally you shouldn't try to make page behavior browser-specific. I would argue that a much better solution would be to make the "Qwerty" text click act the same way on all browsers.

通常,您不应尝试使页面行为特定于浏览器。我认为更好的解决方案是让“Qwerty”文本在所有浏览器上以相同的方式单击。

You can do it with JavaScript - wrap the text in a <span> element, and give it an onclick event which would check your radio button. To find the radio button reliably, you should give it an id attribute. Then call preventDefault on the click event, to avoid any unwanted behavior which may or may not happen otherwise.

您可以使用JavaScript执行此操作 - 将文本包装在元素中,并为其提供一个onclick事件,该事件将检查您的单选按钮。要可靠地找到单选按钮,您应该为其指定一个id属性。然后在click事件上调用preventDefault,以避免任何可能会或可能不会发生的不需要的行为。

Your final HTML should look like this:

您的最终HTML应如下所示:

<label>
   <input type="hidden" name="styless" value="9">
   <input type="radio" style="display:none" id="qwerty-radio-box">
   <span onclick="document.getElementById('qwerty-radio-box').checked = true; event.preventDefault();">Qwerty</span>
</label>

In your question, you didn't mention whether or not your project already has a JavaScript codebase. If it does, you should move the JavaScript code there, instead of keeping it in this onclick event attribute. If it doesn't, and this is the only usage, I'd say it's fine leaving it here.

在您的问题中,您没有提到您的项目是否已经拥有JavaScript代码库。如果是,则应将JavaScript代码移到那里,而不是将其保留在此onclick事件属性中。如果没有,这是唯一的用法,我会说没关系就好了。

#2


0  

You can use $.browser property, you can do it using jQuery Migrate plugin (for JQuery >= 1.9 - in earlier versions you can just use it) and then do something like this:

您可以使用$ .browser属性,您可以使用jQuery Migrate插件(对于JQuery> = 1.9 - 在早期版本中您可以使用它),然后执行以下操作:

if (!$.browser.msie){
// do something
}

#1


1  

Generally you shouldn't try to make page behavior browser-specific. I would argue that a much better solution would be to make the "Qwerty" text click act the same way on all browsers.

通常,您不应尝试使页面行为特定于浏览器。我认为更好的解决方案是让“Qwerty”文本在所有浏览器上以相同的方式单击。

You can do it with JavaScript - wrap the text in a <span> element, and give it an onclick event which would check your radio button. To find the radio button reliably, you should give it an id attribute. Then call preventDefault on the click event, to avoid any unwanted behavior which may or may not happen otherwise.

您可以使用JavaScript执行此操作 - 将文本包装在元素中,并为其提供一个onclick事件,该事件将检查您的单选按钮。要可靠地找到单选按钮,您应该为其指定一个id属性。然后在click事件上调用preventDefault,以避免任何可能会或可能不会发生的不需要的行为。

Your final HTML should look like this:

您的最终HTML应如下所示:

<label>
   <input type="hidden" name="styless" value="9">
   <input type="radio" style="display:none" id="qwerty-radio-box">
   <span onclick="document.getElementById('qwerty-radio-box').checked = true; event.preventDefault();">Qwerty</span>
</label>

In your question, you didn't mention whether or not your project already has a JavaScript codebase. If it does, you should move the JavaScript code there, instead of keeping it in this onclick event attribute. If it doesn't, and this is the only usage, I'd say it's fine leaving it here.

在您的问题中,您没有提到您的项目是否已经拥有JavaScript代码库。如果是,则应将JavaScript代码移到那里,而不是将其保留在此onclick事件属性中。如果没有,这是唯一的用法,我会说没关系就好了。

#2


0  

You can use $.browser property, you can do it using jQuery Migrate plugin (for JQuery >= 1.9 - in earlier versions you can just use it) and then do something like this:

您可以使用$ .browser属性,您可以使用jQuery Migrate插件(对于JQuery> = 1.9 - 在早期版本中您可以使用它),然后执行以下操作:

if (!$.browser.msie){
// do something
}