提问者:小点点

如何使用按钮在模式表单中选中/取消选中复选框(Bootstrap)


我正在尝试通过在portfolio gallery中单击分配的按钮来检查模式表单中的复选框(我不希望每次选中模式表单时都弹出,检查操作要在后台完成,但当单击用于弹出模式表单的特定按钮时会显示出来。例如“立即订购”按钮。) 我的modal和gallery的HTML代码如下:

模态部件

    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title w-100 text-center" >Fill your Enquiry</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body justify-content-center">
      <form action="mail_handler.php" method="POST" name="form" class="form-box">
        <div class="modal-body mx-3">
        <div class="form-group">
      <div class="form-row">
        <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="check1" name="tours[]" value="check1">
        <label class="custom-control-label" for="check1">Check1</label>
        </div>
        &nbsp; &nbsp;
        <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="Check2" name="tours[]" value="check2">
        <label class="custom-control-label" for="Check2">Check2</label>
        </div>
        &nbsp; &nbsp;
        <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="Check3" name="tours[]" value="check3">
        <label class="custom-control-label" for="Check3">Check3</label>
        </div>
        </div>
        <div class="form-row">
        <div class="custom-control custom-checkbox">
        <input type="checkbox" class="custom-control-input" id="Check4" name="tours[]" value="Check4">
        <label class="custom-control-label" for="Check4">Check4</label>
        </div>

作品集库部分:

<div class="section-title" data-aos="zoom-out-right">
  <h2>Gallery</h2>
  <p>galler details</p>
</div>
<div class="row portfolio-container" data-aos="zoom-out-right" data-aos-delay="400">

  <div class="col-lg-4 col-md-6 portfolio-item">
    <div class="portfolio-wrap">
      <img src="">
      <div class="portfolio-info">
        <h4>Pcture 1</h4>
        <p>Picture 1 details </p>
        <div class="portfolio-links">
          <button id="checkmodal" type="button" class="buttonaa" class="check"><a><i class="bx bx-plus"></i></a></button>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-item">
    <div class="portfolio-wrap">
      <img src="">
      <div class="portfolio-info">
        <h4>Picture 2</h4>
        <p>Picture 2 details</p>
        <div class="portfolio-links">
         <button id="checkmodal" type="button" class="buttonaa" class="check"><a><i class="bx bx-plus"></i></a></button>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-item">
    <div class="portfolio-wrap">
      <img src="">
      <div class="portfolio-info">
        <h4>Picture 3</h4>
        <p>Picture 3 details</p>
        <div class="portfolio-links">
          <button id="checkmodal" type="button" class="buttonaa" class="check"><a><i class="bx bx-plus"></i></a></button>
        </div>
      </div>
    </div>
  </div>

  <div class="col-lg-4 col-md-6 portfolio-item">
    <div class="portfolio-wrap">
      <img src="">
      <div class="portfolio-info">
        <h4>Picture 4</h4>
        <p>Picture 4 details.</p>
        <div class="portfolio-links">
          <button id="checkmodal" type="button" class="buttonaa" class="check"><a><i class="bx bx-plus"></i></a></button>
        </div>
      </div>
    </div>
  </div>

注意,我没有添加两个部分的结尾,只需要一个javascript来执行这些,但是,在谷歌搜索了几天之后,我没有找到它。 我不是一个web开发人员,现在只是学习。


共1个答案

匿名用户

我假设你的意思是你想在页面上有一个按钮“在后台”选中一个模式内的复选框,而不激活该模式

null

function checkIt(x) {
  var checkbox = document.getElementById(x)
  if(!checkbox.checked) {
	checkbox.checked = true
  } else {
  	checkbox.checked = false
  }
}
<input type="checkbox" id="myCheck">

<button onclick="checkIt('myCheck')">Change State</button>