Question

我有一系列input[checkbox]元素，当选中复选框时，我会抓住它的父母的HTML。

在代码片段中，我会单独浏览每个元素（例如，如果选中了#apples，我将其设置为“已检查”属性为“真实”并抓住它的父母的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);
}

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

试试这个：

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

http://jsfiddle.net/y37L78pn/

Answer 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/

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

3 个答案: