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

【问题标题】：Checkbox Change: update html with current checked elements复选框更改：使用当前选中的元素更新 html
【发布时间】：2015-09-12 18:21:25
【问题描述】：

我有一系列input[checkbox]元素，当检查复选框时，我抓住它是父母的html。

在 sn-p 中，我将分别浏览每个元素（例如，如果选中了 #apples，我将其选中属性设置为 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);
}

有人知道是否有更简单的方法吗？

function checkCheckedHTML() {
  if ( $(".check").is(":checked") || !$(".check").is(":checked") ) {
    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);
    }

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

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

textarea {
  width: 600px;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <input type="checkbox" class="check" id="apples"> 
  <label for="apples">apples</label>
  
  <input type="checkbox" class="check" id="oranges"> 
  <label for="oranges">oranges</label>
  
  <input type="checkbox" class="check" id="grapes"> 
  <label for="grapes">grapes</label>
</div>

<textarea class="wrapper"></textarea>

【问题讨论】：

标签： javascript jquery html checkbox

【解决方案1】：

你只需要更新被改变元素的checked属性，你可以在change事件回调中使用this来访问它的对象

$(".check").on("change", function() {
  $(this).attr('checked',this.checked);
  // updating checked attribute of change event occurred element, this.checked returns current state
  $(".wrapper").val( $(".container").html());
  // updating the value of textarea
});

textarea {
  width: 600px;
  height: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <input type="checkbox" class="check" id="apples"> 
  <label for="apples">apples</label>
  
  <input type="checkbox" class="check" id="oranges"> 
  <label for="oranges">oranges</label>
  
  <input type="checkbox" class="check" id="grapes"> 
  <label for="grapes">grapes</label>
</div>

<textarea class="wrapper"></textarea>

【讨论】：

【解决方案2】：

试试这个：

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

http://jsfiddle.net/y37L78pn/

【讨论】：

【解决方案3】：

我想你可以这样做...如果我理解正确的话：-

$(".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");
});

查看小提琴：https://jsfiddle.net/kfrjzwmh/

【讨论】：