Question

我有一个css自定义复选框。当有人检查时，必须出现一个复选框组。

如果您检查当前代码，我已隐藏主复选框。一旦用户点击该框，它应该显示应该在框内的复选框。

我面临的主要问题是，当我将复选框放在框内时，我收到了html calidation错误。

我该如何实现？

＆＃13;

<div class="form-group custom_chk">
  <div class="col-lg-10 col-md-12 col-sm-12">
    <div class="row">
      <div class="col-lg-5 col-md-5 col-sm-5">
        <input type="checkbox" id="hyper_self" name="hyper_self" />
        <label for="hyper_self">
          <span class="ailment_icon hyper"></span>
          <span class="ailment_text">main Item</span>
          <span class="check_family">
            <span class="check_family_item">
              <input type="checkbox" class="custom-control-input" id="diab_gp">
              <span class="custom-control-indicator"></span>
              <span class="custom-control-description">
                <label for="diab_gp">Grand Parents</label></span>
            </span>
          </span>
        </label>
      </div>
    </div>
  </div>
</div>

＆＃13;

public class Book {
    private String title;
    private String description;
    private String author;
    private String publisher;
    private String isbn;
    private String publishedDate;
    private float price;

    public Book() {
    }

    public Book(String title, String description, String author, String publisher,
            String isbn, String publishedDate, float price) {
        this.title = title;
        this.description = description;
        this.author = author;
        this.publisher = publisher;
        this.isbn = isbn;
        this.publishedDate = publishedDate;
        this.price = price;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDescription() {
        return description;
    }

    public void setDescription(String description) {
        this.description = description;
    }

    public String getAuthor() {
        return author;
    }

    public void setAuthor(String author) {
        this.author = author;
    }

    public String getPublisher() {
        return publisher;
    }

    public void setPublisher(String publisher) {
        this.publisher = publisher;
    }

    public String getIsbn() {
        return isbn;
    }

    public void setIsbn(String isbn) {
        this.isbn = isbn;
    }

    public String getPublishedDate() {
        return publishedDate;
    }

    public void setPublishedDate(String publishedDate) {
        this.publishedDate = publishedDate;
    }

    public float getPrice() {
        return price;
    }

    public void setPrice(float price) {
        this.price = price;
    }
}

＆＃13;

Answer 1

custom_chk课程应该提供给输入复选框。

这些是您需要添加的CSS更改

.custom_chk+label+.checkbox-group {
  display:none;
}
.custom_chk:checked+label+.checkbox-group {
  display:block;
}

您可以在plunker网址

中找到工作示例

http://plnkr.co/edit/D97DUvyzIvVU88Fy4YpD?p=preview

单击主自定义复选框时打开复选框组

1 个答案: