javascript - 使用 JavaScript 的复选框条件

Question

我需要有关 JavaScript 条件的帮助。

这是我的工作代码:

$(document).on("click", "input[name='txt1']", function() {
  $('#modal1').show();
});

$(document).on("click", "input[name='txt2']", function() {
  $('#modal2').show();
});

$(document).on("click", ".btn1", function() {
  $('#modal1').hide();
});

$(document).on("click", ".btn2", function() {
  $('#modal2').hide();
});

$(".radio").change(function() {
  $(".radio").prop('checked', false);
  $(this).prop('checked', true);
});

/* modal layout */
    .modalwrapper {
        top: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        visibility: hidden;
        box-shadow: 0 3px 7px rgba(0,0,0,.25);
        box-sizing: border-box;
        transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
    }

    .modalwrapper:target {
        opacity: 1;
        visibility: visible
    }

    .overlay {
        background-color: #000;
        background: rgba(0,0,0,.8);
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 1;
    }

    .modalcontainer {
        display: table;
        background-color: #777;
        position: relative;
        z-index: 100;
        color: #fff;
        padding: 5px;
    }

    .modalcol1 { display: table-cell; }

    .clear { clear: both; }

    .modalwrapper input[type=checkbox] {
        float: right;
        margin-right: 20px;
    }

    .savebutton input[type=submit] {
        float: right;
        background-color: maroon;
        color: #fff;
        border: none;
        padding: 5px 10px;
        margin-top: 5px;
        margin-right: 20px;
    }
    /* modal layout ends here */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">

  <a href="#modal1">
    <!-- when the input textbox was clicked, modal will pop up -->
    Label 1
    <input readonly type="text" name="txt1" placeholder="inputTest">
  </a>

  <br>
  <br>

  <a href="#modal2">
    <!-- when the input textbox was clicked, modal will pop up -->
    Label 2
    <input readonly type="text" name="txt2" placeholder="inputTest">
  </a>

  <!-- modal starts here -->
  <div class="modalwrapper" id="modal1">
    <!-- modal -->
    <div class="modalcontainer">
      <div class="modalcol1">
        <label>Test 1</label>
        <input type="checkbox" name="test_modal[]" value="1">
        <div class="clear"></div>
        <label>Test 2</label>
        <input type="checkbox" name="test_modal[]" value="2">
        <div class="clear"></div>
        <label>Test 3</label>
        <input type="checkbox" name="test_modal[]" value="3">
        <div class="clear"></div>
        <label>Test 4</label>
        <input type="checkbox" name="test_modal[]" value="4">
        <div class="clear"></div>
        <label>Test 5</label>
        <input type="checkbox" name="test_modal[]" value="5">
        <div class="clear"></div>

        <div class="savebutton">
          <button class="btn1" type="button" value="Submit">Submit</button>
        </div>
      </div>
      <!-- close modalcol1 -->
    </div>
    <!-- close modalcontainer -->
    <div class="overlay"></div>
  </div>
  <!-- close modalwrapper -->


  <div class="modalwrapper" id="modal2">
    <!-- modal -->
    <div class="modalcontainer">
      <div class="modalcol1">
        <label>Mango</label>
        <input class="radio" type="checkbox" name="fruit1" value="1">
        <div class="clear"></div>
        <label>Banna</label>
        <input class="radio" type="checkbox" name="fruit2" value="2">
        <div class="clear"></div>
        <label>Grapes</label>
        <input class="radio" type="checkbox" name="fruit3" value="3">
        <div class="clear"></div>
        <div class="savebutton">
          <button class="btn2" type="button" value="Submit">Submit</button>
        </div>
      </div>
      <!-- close modalcol1 -->
    </div>
    <!-- close modalcontainer -->
    <div class="overlay"></div>
  </div>
  <!-- close modalwrapper -->
</form>

在我的标签 1 复选框上，您可以进行多个选中。我想要的是，如果选中的复选框大于 1，它将在我的文本框中回显 Multiple 值。
请向我解释一下您的代码是如何工作的，以便我将来可以使用。

Answer 1

您可以使用.length来获取选择器找到的项目数，因此您可以编写:

if ($("#modal1 :checkbox:checked").length > 1) {
    $("input[name=txt1]").val("multiple");
}

$(document).on("click", "input[name='txt1']", function() {
  $('#modal1').show();
});

$(document).on("click", "input[name='txt2']", function() {
  $('#modal2').show();
});

$(document).on("click", ".btn1", function() {
  if ($('#modal1 :checkbox:checked').length > 1) {
    $('input[name=txt1]').val('multiple');
  } else {
    $('input[name=txt1]').val($('#modal1 :checkbox:checked').val());
  }

  $('#modal1').hide();
});

$(document).on("click", ".btn2", function() {
  $('#modal2').hide();
});

$(".radio").change(function() {
  $(".radio").prop('checked', false);
  $(this).prop('checked', true);
});

/* modal layout */

.modalwrapper {
  top: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  visibility: hidden;
  box-shadow: 0 3px 7px rgba(0, 0, 0, .25);
  box-sizing: border-box;
  transition: all .4s ease-in-out;
  -webkit-transition: all .4s ease-in-out;
  -moz-transition: all .4s ease-in-out;
}
.modalwrapper:target {
  opacity: 1;
  visibility: visible
}
.overlay {
  background-color: #000;
  background: rgba(0, 0, 0, .8);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}
.modalcontainer {
  display: table;
  background-color: #777;
  position: relative;
  z-index: 100;
  color: #fff;
  padding: 5px;
}
.modalcol1 {
  display: table-cell;
}
.clear {
  clear: both;
}
.modalwrapper input[type=checkbox] {
  float: right;
  margin-right: 20px;
}
.savebutton input[type=submit] {
  float: right;
  background-color: maroon;
  color: #fff;
  border: none;
  padding: 5px 10px;
  margin-top: 5px;
  margin-right: 20px;
}
/* modal layout ends here */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="testform" action="">

  <a href="#modal1">
    <!-- when the input textbox was clicked, modal will pop up -->
    Label 1
    <input readonly type="text" name="txt1" placeholder="inputTest">
  </a>

  <br>
  <br>

  <a href="#modal2">
    <!-- when the input textbox was clicked, modal will pop up -->
    Label 2
    <input readonly type="text" name="txt2" placeholder="inputTest">
  </a>

  <!-- modal starts here -->
  <div class="modalwrapper" id="modal1">
    <!-- modal -->
    <div class="modalcontainer">
      <div class="modalcol1">
        <label>Test 1</label>
        <input type="checkbox" name="test_modal[]" value="1">
        <div class="clear"></div>
        <label>Test 2</label>
        <input type="checkbox" name="test_modal[]" value="2">
        <div class="clear"></div>
        <label>Test 3</label>
        <input type="checkbox" name="test_modal[]" value="3">
        <div class="clear"></div>
        <label>Test 4</label>
        <input type="checkbox" name="test_modal[]" value="4">
        <div class="clear"></div>
        <label>Test 5</label>
        <input type="checkbox" name="test_modal[]" value="5">
        <div class="clear"></div>

        <div class="savebutton">
          <button class="btn1" type="button" value="Submit">Submit</button>
        </div>
      </div>
      <!-- close modalcol1 -->
    </div>
    <!-- close modalcontainer -->
    <div class="overlay"></div>
  </div>
  <!-- close modalwrapper -->


  <div class="modalwrapper" id="modal2">
    <!-- modal -->
    <div class="modalcontainer">
      <div class="modalcol1">
        <label>Mango</label>
        <input class="radio" type="checkbox" name="fruit1" value="1">
        <div class="clear"></div>
        <label>Banna</label>
        <input class="radio" type="checkbox" name="fruit2" value="2">
        <div class="clear"></div>
        <label>Grapes</label>
        <input class="radio" type="checkbox" name="fruit3" value="3">
        <div class="clear"></div>
        <div class="savebutton">
          <button class="btn2" type="button" value="Submit">Submit</button>
        </div>
      </div>
      <!-- close modalcol1 -->
    </div>
    <!-- close modalcontainer -->
    <div class="overlay"></div>
  </div>
  <!-- close modalwrapper -->
</form>