无法同时更改复选框的选中状态

Question

当我勾选“星期一”的复选框时，“星期二”的选中状态会被更新。它同时有效。

但是，一旦我单击“星期二”以勾选或取消勾选它，然后再勾选“星期一”，“星期二”就不再像“星期一”一样改变状态了。在勾选/取消勾选“星期二”之后，它不会与“星期一”复选框同步。

$(function() {
  // main product upload
  $("#monday").change(function(e) {
    $("#tuesday").attr("checked", this.checked);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="checkbox" id="monday" name="monday">
<input type="checkbox" id="tuesday" name="tuesday">

- neostar-2020

Answer 1

使用 prop 而不是 attr。

$(function () {
    // main product upload
    $( "#monday" ).change(function(e) {
        $( "#tuesday" ).prop("checked", this.checked);
    });       
});

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

Monday: <input type="checkbox" id="monday" name="monday" > <br/>
Tues: <input type="checkbox" id="tuesday" name="tuesday" >

- haldo

---

使用本地 DOM API 而不是 jQuery。 - connexo

Answer 2

2021年大多数情况下，jQuery是一个无用的工具的又一个例子。

这很容易实现，无需使用任何第三方代码：

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('monday').addEventListener('change', function(e) {
    document.getElementById('tuesday').checked = e.target.checked;
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<input type="checkbox" id="monday" name="monday">
<input type="checkbox" id="tuesday" name="tuesday">

- connexo

Answer 3

面试答案 :)

Both method are used for set and get value, 
attr() returns the default value (Original state) of a property
whereas prop() returns the current value (Current state).

- nano dev

Answer 4

阅读此问题

该链接是一个解释prop和attr之间差异的问题。

属性通常比属性更容易处理。属性值只能是字符串，而属性可以是任何类型。例如，checked属性是一个布尔值。如果您检查以前的代码，您会看到代码添加了一个字符串checked，但使用prop则不同。

- Isac X