Javascript 复选框更改：使用当前选中的元素更新html

我有一系列

input[checkbox]

元素，当选中一个复选框时，我会抓取它的父级html

在代码片段中，我将逐个检查每个元素（例如，如果选中了#apples，我将其checked属性设置为true，并获取其父元素的html）

但是我不喜欢像这里看到的那样逐个检查每个元素

if ( $("#apples").is(":checked") ) {
  $("#apples").attr("checked", true);
} else {
  $("#apples").attr("checked", false);
}
if ( $("#oranges").is(":checked") ) {
  $("#oranges").attr("checked", true);
} else {
  $("#oranges").attr("checked", false);
}
if ( $("#grapes").is(":checked") ) {
  $("#grapes").attr("checked", true);
} else {
  $("#grapes").attr("checked", false);
}

有人知道有没有更简单的方法

函数checkedHTML（）{
如果（$（“.check”）.is（“：checked”）| |！$（“.check”）.is（“：checked”））{
如果（$（“#苹果”）是（“：选中”））{
$（“#苹果”）.attr（“选中”，为真）；
}否则{
$（“#苹果”）.attr（“选中”，假）；
}
如果（$（“#橙子”）是（“：选中”））{
$（“#橙子”）.attr（“选中”，为真）；
}否则{
$（“#橙子”）.attr（“选中”，假）；
}
如果（$（“#grapes”）。是（“：选中”））{
$（“#grapes”）.attr（“选中”，为真）；
}否则{
$（“#grapes”）.attr（“选中”，假）；
}
$（“.wrapper”）.val（$（“.container”）.html（））；
log（“选中：使用当前选中的元素更新html”）；
}
}
$（“.check”）。在（“单击更改”，函数（）{
checkedHTML（）；
});
textarea{
宽度：600px；
高度：150像素；
}

苹果
橘子
葡萄
试试这个：

$(".check").on("click change", function() {
   if ( $(".check").is(":checked")){
       $(this).attr("checked",true);  
   } else {
            $(this).attr("checked",false);  
   }
});

如果我理解正确，我想你可以做到这一点：-

$(".check").on("click change", function() {

  if ( $(this).is(":checked") ) $(this).attr("checked", true);
  else $(this).attr("checked", false);

  $(".wrapper").val( $(".container").html() );
    console.log("Checked: update html with current checked elements");
});

检查小提琴：您只需要更新已更改元素的checked属性，您可以在更改事件回调中使用
this
访问它的对象


$（.check”）.on（“更改”，函数（）{
$（this.attr（'checked'，this.checked））；
//更新change event Occessed元素的checked属性，this.checked返回当前状态
$（“.wrapper”）.val（$（“.container”）.html（））；
//更新textarea的值
});
textarea{
宽度：600px；
高度：150像素；
}

苹果
橘子
葡萄