Question

我在父屏幕上有一个国家/地区复选框列表。我还提供了一个包含相同国家/地区的模式（div），并为用户提供了更多的国家/地区选项。

在父列表框中进行的任何复选框更改都需要转移到模态，并且当模式关闭时，模式中所做的任何更改都必须反映在父列表框中。

在一个彻底缩减的小提琴中你可以看到我的jquery没有将复选框附加到模态（...而且我可能也需要帮助将它们还给父母！）。我搜索过以前的帖子但到目前为止没有任何作用。有人可以帮忙吗？

＆＃13;

$('#openCountryRegionModal').click(function() {
  var targetBox = $(this).prop("checked") ? '#ModalContainerID' : '.CountryRHWrapperClass';
  $('.myWorldCountries').appendTo($(targetBox));
});

＆＃13;

#ModalCountryButtonID {
  color: red;
  background: white;
  text-decoration: none;
  border: 1px solid blue;
  margin-top: 20px;
}
/* Modal code  */

#ModalContainerID {
  height: 40px;
  background: yellow;
}
.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 200ms ease-in;
  -moz-transition: opacity 200ms ease-in;
  transition: opacity 200ms ease-in;
  pointer-events: none;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}
.modalDialog > div {
  height: 100px;
  position: relative;
  margin-left: calc(8vw);
  margin-right: calc(8vw);
  margin-top: 20px;
  padding: 15px 10px 10px 10px;
  border-radius: 5px;
  background: #fff;
}
.close {
  color: orange;
  line-height: 25px;
  position: absolute;
  right: 5px;
  text-align: center;
  top: 5px;
  width: 24px;
  text-decoration: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Store Countries -->
<div class=CountryRHWrapperClass>
  <label class="myWorldCountries">
    <input type="checkbox" value="Spain" />Spain</label>
  <label class="myWorldCountries">
    <input type="checkbox" value="Austria" />Austria</label>
  <label class="myWorldCountries">
    <input type="checkbox" value="Belgium" />Belgium</label>
</div>
<br>
<br>
<!-- Create Link button to open modal ------------------------------------>
<div class="ModalButtonRegionCountryDivClass">
  <a href="#openCountryRegionModal" id="ModalCountryButtonID">Open modal</a>
</div>
<!-- Trigger modal ---------------------------------->
<div id="openCountryRegionModal" class="modalDialog">
  <div> <a href="#close" title="Close" class="close">X</a>
    <!-- Append countries to modal here ------------------------>
    <div id="ModalContainerID" class="ModalContainerClass"></div>
  </div>
</div>

＆＃13;

Answer 1

您需要使用javascript函数并添加一些ID并将方法附加到每个复选框以获得此功能。有几种方法可以使用复选框的方法，jQuery当然不是必需的，因为本机javascript可以很容易地工作。

这是一个简单的版本：

使用Javascript：

function checkMyBox(id, modal) {
    if(typeof modal === "undefined") {
        if($('#' + id).is(":checked")) {
            $('#modal_' + id).prop('checked', true);
        } else {
            $('#modal_' + id).prop('checked', false);
        }
    } else {
        if($('#modal_' + id).is(":checked")) {
            $('#' + id).prop('checked', true);
        } else {
            $('#' + id).prop('checked', false);
        }
    }
}

您的身体复选框将如下所示：

<input type="checkbox" id="check1" onchange="checkMyBox(this.id);" /> Spain
<input type="checkbox" id="check2" onchange="checkMyBox(this.id);" /> Austria
<input type="checkbox" id="check3" onchange="checkMyBox(this.id);" /> Belgium

您的模态复选框将如下所示：

<input type="checkbox" id="modal_check1" onchange="checkMyBox('check1', 1);" /> Spain
<input type="checkbox" id="modal_check2" onchange="checkMyBox('check2', 1);" /> Austria
<input type="checkbox" id="modal_check3" onchange="checkMyBox('check3', 1);" /> Belgium

使用元素名称数组的替代方法： 您还可以使用名称数组。以下是使用每个名称两次的示例，但您可以根据需要在DOM中的多个位置使用它。顺便说一句，这假设你的模态是体内的div。

使用Javascript：

function checkMyBox2(name, checked) {
    var elems = document.getElementsByName(name);
    if (elems[i].type == "checkbox") {
        if(checked==true) {
            for (var i = 0; i < elems.length; i++) {
                elems[i].checked = true;
            }
        } else {
            for (var i = 0; i < elems.length; i++) {
                elems[i].checked = false;
            }
        }
    }
}

主体元素：

<input type="checkbox" name="check1[]" onchange="checkMyBox2(this.name, this.checked);" /> Spain<br />
<input type="checkbox" name="check2[]" onchange="checkMyBox2(this.name, this.checked);" /> Austria<br />
<input type="checkbox" name="check3[]" onchange="checkMyBox2(this.name, this.checked);" /> Belgium

模态元素：

<input type="checkbox" name="check1[]" onchange="checkMyBox2(this.name, this.checked);" /> Spain<br />
<input type="checkbox" name="check2[]" onchange="checkMyBox2(this.name, this.checked);" /> Austria<br />
<input type="checkbox" name="check3[]" onchange="checkMyBox2(this.name, this.checked);" /> Belgium

在父级和模态

1 个答案: