jquery 镜像复选框，并在选中或单击时选择

lymnna71 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(111)

我有一个select和一个checkbox，我想串联工作。select有四个选项，值为 null、Yes、No 和 Maybe。
当select为 Yes 或 Maybe 时，应检查checkbox。
当checkbox被取消选中时，select应设置回 null，.text()设置为空字符串。
一切似乎工作，除了我失去了文本的选项在select当我取消选中checkbox。当我检查选项时，选择的.text()为空，选择的.prop("null")设置为“是”，现在为空。
这个片段显示了正在发生的事情。

$(function() {
    $("#test-1").blur(function() {
        if($("#test-1").val() == "Yes" || $("#test-1").val() == "Maybe" ) {
            $("#result").html("<p>The SELECT is 'YES' and the CHECKBOX is checked. This is intended.<br>Now uncheck CHECKBOX<p>");
            $("#test-2").prop("checked", true);
        } else {
            $("#result").html("<p>The SELECT is 'NO' and the CHECKBOX is unchecked<br>Now SELECT 'YES'<p>");        
            //$("#test-1").text("");
            $("#test-1").prop("null");
            $("#test-2").prop("checked", false);
        } 
    });
});

$(function() {
    $("#test-2").click(function() {
        if($(this).is(":checked")) {
            $("#result").html("Hello World 3")
            $("#test-1 option:selected").text("Yes");
            $("#test-1 option:selected").prop("Yes");
        } else {
            $("#result").html("<p>The CHECKBOX is unchecked and the SELECT is empty, but some SELECT options are missing. Check SELECT.<p>")
            $("#test-1 option:selected").text("");
            $("#test-1 option:selected").prop("null");
        }
    });
});

.test {
    display: flex;
    flex-direction: column;
    width: 50%;
    line-height: 22px;
}
#test-2 {
    border: 12px solid red;
    padding-left: 25px;
}
#result {
    margin-top: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Select <span style="font-weight:600;color:red">YES</span>. Click outside to lose focus.</p>
<div class="test">
    <div>
        Test 1: 
        <select id="test-1" name="test-1">
            <option selected value="null"></option>
            <option value="Yes">Yes</option>
            <option value="No">No</option>
            <option value="Maybe">Maybe</option>
        </select>
    </div>
    <div>
        <br>Test 2:
        <input id="test-2" type="checkbox" name="test-2">
    </div>
</div>

<div id="result">{results appear here}</div>

jquery

来源：https://stackoverflow.com/questions/76715395/mirroring-a-checkbox-and-select-when-weither-are-selected-or-clicked

1条答案

按热度按时间

5lwkijsr1#

这是因为对jQuery方法的一些不必要和有害的调用。
它们获取select/selected option元素的名为“null”的属性，这实际上什么也不做：

$("#test-1").prop("null");
$("#test-1 option:selected").prop("Yes");
$("#test-1 option:selected").prop("null");

字符串
...而这些更改当前选定选项元素的文本。第二个就是我们要找的罪犯

$("#test-1 option:selected").text("Yes");
$("#test-1 option:selected").text("");

型
也就是说，你可以按如下方式修复你的代码：

$select.change(function() {
  const currentValue = $select.val();
  
  // If the current selected option has a value of
  // either "Yes" or "Maybe", we check the checkbox.
  // Uncheck it otherwise.
  if (['Yes', 'Maybe'].includes(currentValue)) {
    $checkbox.prop('checked', true);
  } else {
    $checkbox.prop('checked', false);
  }
});

$checkbox.change(function() {
  if (!$checkbox.is(':checked')) {
    // If the checkbox, after being .change()-d, is unchecked,
    // find the option whose value="" is "null"
    // and select it.
    $select.find('[value="null"]').prop('selected', true);
  }
});

型
此外，在这种情况下，不需要具有两个$(function() { /* ... */ })。要么使用一个，要么完全跳过它。
试试看：

const [$select, $checkbox] = [$('#select'), $('#checkbox')];

$select.change(function() {
  const currentValue = $select.val();
  
  if (['Yes', 'Maybe'].includes(currentValue)) {
    $checkbox.prop('checked', true);
  } else {
    $checkbox.prop('checked', false);
  }
});

$checkbox.change(function() {
  if (!$checkbox.is(':checked')) {
    $select.find('[value="null"]').prop('selected', true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test">
  <div>
    Test 1:
    <select id="select">
      <option selected value="null"></option>
      <option value="Yes">Yes</option>
      <option value="No">No</option>
      <option value="Maybe">Maybe</option>
    </select>
  </div>
  <div>
    <br>Test 2:
    <input id="checkbox" type="checkbox">
  </div>
</div>

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 镜像复选框，并在选中或单击时选择

1条答案

相关问题

热门标签

最新问答