如何在 HTML 中显示是否而不是复选框？答案

【问题标题】：How to show yes no instead of check box in HTML?如何在 HTML 中显示是否而不是复选框？
【发布时间】：2018-12-19 14:28:06
【问题描述】：

我有一个网页，上面有几个复选框。打印时要隐藏复选框并根据复选框是否选中显示“是”或“否”。有没有不通过 java-script 的简单方法？

【问题讨论】：

请出示您的代码
没有 :p 谷歌自定义复选框的方法 - 它的地狱！您可以使用 CSS 选择器和之前/之后显示一些文本，但要隐藏复选框，您可以在其上放置一些东西或将其移出视口
@Lux 不是 CSS 打印媒体可以解决问题吗？
@YashwardhanPauranik 这只是简单的复选框
@Robert 是的，我正在使用 CSS 打印媒体和引导程序 3

标签： javascript html css

【解决方案1】：

你可以尝试一些 CSS 规则

input[type=checkbox]::after {
  position: relative;
  left: 20px;
  content: "no";
}

input[type=checkbox]:checked::after { 
  content: "yes";
}

&lt;input type="checkbox"&gt;

【讨论】：

input 元素不能有content，因此没有::after 或::before 伪元素。检查您在 Firefox 中的代码是否正确实现了这一点。
查看stackoverflow.com/questions/35378360/… 以供参考。

【解决方案2】：

input[type=checkbox]+label {
    	display: none;
    }
    @media print {
        input[type=checkbox] {
            display: none;
        }
		input[type=checkbox]+label {
    		display: block;
		}
        input[type=checkbox]+label span.yes {
            display: none;
        }

        input[type=checkbox]:checked+label span.yes {
            display: block;
        }

        input[type=checkbox]:checked+label span.No {
            display: none;
        }

        input[type=checkbox]::after {
            position: relative;
            left: 20px;
            content: "";
            display: none;
        }

        input[type=checkbox]:checked::after {
            content: "";
        }
    }

<input type="checkbox" id="yeNo" checked>
<label for="yeNo">
    <span class="yes">Yes</span>
    <span class="No">No</span>
</label>

这就是你想要的，当你执行 ctrl + P 时，将这段代码复制到你的 html 中，看看结果。或者你可以在这里运行 sn-p 并按 CTRL + P 来查看结果。

【讨论】：

这真的很好但是这样我必须设置 Yes No 用于所有复选框。非常感谢！

【解决方案3】：

大家好，感谢您的帮助，我能够使用以下代码来做到这一点。请让我知道您的想法，如果有更好的方法，请告诉我。

.yes-no-check-text:before {
  content: 'No';
}

.yes-no-check-input:checked ~ .yes-no-check-text:before {
  content: 'Yes';
}

.visible-print {
  display: none !important;
}
@media print {
  .visible-print {
    display: block !important;
  }
  .hidden-print {
    display: none !important;
  }
}

  <!--  Code that hides check box controller when printing and shows yes no depending
        on check box checked or not -->
<form>
	<input type="checkbox" class="yes-no-check-input hidden-print" />
	<span class="yes-no-check-text visible-print"></span>
</form>
</br>
  <!--  test Code to show yes no wording selecting properly with check box selection -->
<form>
	<input  type="checkbox" class="yes-no-check-input" />
	<span class="yes-no-check-text"></span>
</form>

【讨论】：

其实这很好，但不是您在问题中提出的确切内容，请检查我的答案一次。
input 元素不能有content，因此，没有::after 或::before 伪元素。检查您在 Firefox 中的代码是否正确实现了这一点。
查看stackoverflow.com/questions/35378360/… 以供参考。
@connexo 我在所有浏览器上都试过了，效果很好。谢谢，感谢您的帮助