我有一个网页，上面有几个复选框。 打印时要隐藏复选框，并根据是否选中复选框显示“是”或“否”。 有没有一种简单的方法，而无需通过Java脚本？
答案 0 :(得分：1)
您可以尝试一些CSS规则
input[type=checkbox]::after {
position: relative;
left: 20px;
content: "no";
}
input[type=checkbox]:checked::after {
content: "yes";
}<input type="checkbox">
答案 1 :(得分：1)
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中，查看结果。或者，您也可以在此处运行代码段，然后按CTRL + P以查看结果。
答案 2 :(得分：0)
大家好，谢谢您的帮助， 我能够使用以下代码来做到这一点。 请让我知道您的想法，如果有更好的方法，请告诉我。
// react core
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createStructuredSelector } from 'reselect'
// partials
import { ProductImage } from './Partials/ProductImage'
const mapStateToProps = createStructuredSelector({
})
const mapDispatchToProps = dispatch => ({
})
export class Stock extends Component {
state = {
openCard: false,
showCard: false,
confirmDelete: false
}
// to show product details
onCard = openCard => {
}
// to show and close add to stock option
_ShowCard = () => {
}
// onDlete Stock
onDeleteStock = data => {
}
// update the products
handlesubmit = data => {
}
onUpdate = data => {
}
onCancelDelete = () => {
}
onGetStock = () => {
}
componentDidMount() {
this.onGetStock()
}
render() {
let {
props: { stockProducts, error, products, fetching },
state: { openCard, showCard, confirmDelete },
onCard,
onGetStock,
_ShowCard,
handlesubmit,
onUpdate,
onDeleteStock,
onCancelDelete
} = this
return (
<KeyboardAvoidingWrapper fluid enabled={!showCard}>
<ActionWrapper
title="In stock"
description={'Manage your in stock items'}
actions={
!showCard
? [
{
name: 'Add to stock',
desc: 'You can add an item from your products',
icon: 'plus-circle',
onPress: () => {
_ShowCard()
}
}
]
: []
}
busy={fetching}
onRefresh={onGetStock}
withSearch
data={stockProducts}
>
{stockProducts => (
<FormProvider>
<Wrapper>
<Spacer size={10} />
{stockProducts.map(
(
{
name,
price,
vendorPrice,
amount,
stock = {},
_id,
image = {}
},
key
) => (
<Card snow buffer key={_id}>
<Row fluid inline>
<ProductImage
compact
flickr_id={
image.flickr_id ? image.flickr_id : '41547729080'
}
/>
<Block width={8}>
<P compact uppercase>
<P compact bold>
{stock.quantity}
</P>{' '}
x {name}
</P>
<P compact bold>
In stock
</P>
<P small compact>
{currencyMask(vendorPrice)} per each
</P>
<P compact small>
Created At :{' '}
{moment(stock.createdAt).format('YYYY-MM-DD')}
</P>
</Block>
<Block
justify="center"
alignItems="center"
onPress={() => {
onCard(openCard === _id ? false : _id)
}}
>
<FIcon
size={25}
name={
openCard === _id ? 'chevron-up' : 'chevron-down'
}
/>
</Block>
</Row>
{openCard === _id && (
<FormBridge>
{({ handleChange, formState }) => (
<React.Fragment>
<HorizontalLine />
<Row fluid justify="center">
{confirmDelete !== true ? (
<Block
justify="flex-end"
fluid
width={2}
onPress={() => {
onDeleteStock({ _id: _id })
}}
>
<FIcon
size={25}
color={Colors.fire}
name="trash"
/>
</Block>
) : (
<React.Fragment>
<Block
justify="flex-end"
width={2}
alignItems="flex-start"
>
<BorderButton
text="confirm"
onPress={() => {
onDeleteStock({ _id: _id })
}}
/>
</Block>
<Block
justify="flex-end"
alignItems="flex-end"
width={2}
className="cancel"
onPress={() => {
onCancelDelete()
}}
>
<FIcon
size={25}
color={Colors.fire}
name="x-circle"
/>
</Block>
</React.Fragment>
)}
{confirmDelete === false && (
<React.Fragment>
<Block
justify="flex-end"
alignItems="stretch"
width={5}
>
<P small center>
Quantity
</P>
{/*eslint-disable */}
<Row fluid>
{formState['quantityUpdate'] &&
formState['quantityUpdate'].value >
1 && (
<Block
fluid
justify="center"
alignItems="center"
onPress={() => {
if (
formState['quantityUpdate'] &&
!parseInt(
formState['quantityUpdate']
.value
) <= 0
) {
handleChange(
'quantityUpdate',
`${parseInt(
formState[
'quantityUpdate'
].value
) - 1}`
)
} else {
handleChange(
'quantityUpdate',
'0'
)
}
}}
>
<FIcon
size={20}
color={Colors.fire}
name="minus-square"
/>
</Block>
)}
<Block width={3} fluid>
<FormInput
name="quantityUpdate"
defaultValue={`${stock.quantity}`}
label={'Quantity'}
compact
numeric
keyboardType="phone-pad"
/>
</Block>
<Block
fluid
justify="center"
alignItems="center"
onPress={() => {
handleChange(
'quantityUpdate',
`${parseInt(
formState['quantityUpdate']
.value
) + 1}`
)
}}
>
<FIcon
size={20}
color={Colors.facebook}
name="plus-square"
/>
</Block>
</Row>
{/* eslint-enable */}
</Block>
<Block justify="flex-end" fluid width={3}>
<BorderButton
compact
text="Update"
onPress={e => {
onUpdate({
id: _id,
quantity:
formState['quantityUpdate'].value
})
}}
/>
</Block>
</React.Fragment>
)}
</Row>
</React.Fragment>
)}
</FormBridge>
)}
</Card>
)
)}
</Wrapper>
</FormProvider>
)}
</ActionWrapper>
</KeyboardAvoidingWrapper>
)
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Stock)
.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;
}
}