Question

您好，我只是想隐藏/显示div的复选框，但我尝试了下面的代码/脚本，但是没有用？我还想知道是否有更简单的方法？

import csv
x=["2018-08-27 15:21:49","2018-08-27 15:21:52","2018-08-27 15:21:56"]
y=["5523","3512","3383"]
L=[]
with open("test.csv","w",newline='') as f:
    writer=csv.writer(f)
    for i in range(len(x)):
        row=x[i]+','+y[i]
        print([row])

function checkBox1() {    
  var checkBox = document.getElementById("myCheck1");
    var text = document.getElementsByClassName("shop");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

function checkBox2() {    
  var checkBox = document.getElementById("myCheck2");
    var text = document.getElementsByClassName("party");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

function checkBox3() {    
  var checkBox = document.getElementById("myCheck3");
    var text = document.getElementById("dailyquests");
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

对不起，如果我的英语不好

Answer 1

document.getElementsByClassName返回元素列表。文本对象位于第一个元素中：

function checkBox1() {    
  var checkBox = document.getElementById("myCheck1");
    var text = document.getElementsByClassName("shop")[0];
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

function checkBox2() {    
  var checkBox = document.getElementById("myCheck2");
    var text = document.getElementsByClassName("party")[0];
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

function checkBox3() {    
  var checkBox = document.getElementById("myCheck3");
    var text = document.getElementsByClassName("dailyquests")[0];
    if (checkBox.checked == true){
        text.style.display = "block";
    } else {
       text.style.display = "none";
    }
}

<center>| Shop: <input type="checkbox" id="myCheck1" onclick="checkBox1()" checked> | Party: <input type="checkbox" id="myCheck2" onclick="checkBox2()" checked> | Dailyquests: <input type="checkbox" id="myCheck3" onclick="checkBox3()" checked> |</center>
<br>
<br>
<div class="shop">TEXT HERE</div>
<br>
<div class="party">TEXT HERE</div>
<br>
<div class="dailyquests">TEXT HERE</div>

Answer 2

Document.getElementsByClassName（）返回具有所有给定类名的所有子元素的类似数组的对象。

更改此内容：

import React, { Component } from 'react';
import {
    View,
    Text,
    StyleSheet,
    Button
} from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                <Text>Home Screen</Text>
                <Button
                    title="Go to Details"
                    onPress={() => this.props.navigation.navigate('Details')}
                />
            </View>
        );
    }
}


export default HomeScreen;

收件人：

document.getElementsByClassName("shop");
document.getElementsByClassName("party");
document.getElementsByClassName("dailyquests");

采用该类的第一个元素

Ps。

在第三个函数中，您必须使用“ document.getElementsByClassName”而不是“ document.getElementById”，因为“ dailyquests”是一个类，而不是ID

演示： jsfiddle

Answer 3

这是因为document.getElementsByClassName返回一个集合，并且您需要传递索引才能获取该元素。

话虽如此，您可以修改javascript，并且只有一个功能可以完成显示和隐藏的工作。

例如，点击时<input type="checkbox" id="myCheck1" onclick="toggleDisplay(this.id,'shop')" checked将调用toggleDisplay函数，并且使用this.id传递ID。In toggleDisplay（this.id，'shop'）`第二个参数是类名

function toggleDisplay(elemId, className) {
  if (document.getElementById(elemId).checked) {
    document.getElementsByClassName(className)[0].style.display = "block"
  } else {
    document.getElementsByClassName(className)[0].style.display = "none"
  }
}

<center>| Shop: <input type="checkbox" id="myCheck1" onclick="toggleDisplay(this.id,'shop')" checked> | Party: <input type="checkbox" id="myCheck2" onclick="toggleDisplay(this.id,'party')" checked> | Dailyquests: <input type="checkbox" id="myCheck3" onclick="toggleDisplay(this.id,'dailyquests')"
    checked> |
</center>
<br>
<br>
<div class="shop">TEXT HERE</div>
<br>
<div class="party">TEXT HERE</div>
<br>
<div class="dailyquests">TEXT HERE</div>

Answer 4

因此getElementsByClassName返回项目的集合，您需要选择索引-

function checkBox1() {    
  var checkBox = document.getElementById("myCheck1");
  var text = document.getElementsByClassName("shop");
  if (checkBox.checked){
    text[0].style.display = "block";
  } else {
   text[0].style.display = "none";
  }
}

隐藏/显示div复选框，单击

4 个答案: