[英]Checkbox Change: update html with current checked elements
I have a series of input[checkbox]
elements and when a checkbox is checked I grab it's parent's html. 我有一系列input[checkbox]
元素,当选中复选框时,我抓住它的父亲的html。
In the snippet I'm going through each element individually (like if #apples is checked I set it's checked attribute to true and grab it's parent's html) 在代码片段中,我将逐个浏览每个元素(例如,如果检查了#apples,我将其checked属性设置为true并抓住它的父级html)
However I don't like going through and checking each element individually as seen here... 但是,我不喜欢单独检查每个元素,如此处所示......
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);
}
Does anyone know if there's an easier way to do this? 有谁知道有没有更简单的方法来做到这一点?
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>
You just need to update the checked attribute of element which has been changed, you can access it's object by using this
inside the change event callback 你只需要更新已改变元素的checked属性,你可以通过访问它的对象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>
Try this: 尝试这个:
$(".check").on("click change", function() {
if ( $(".check").is(":checked")){
$(this).attr("checked",true);
} else {
$(this).attr("checked",false);
}
});
I suppose you could do this...if I understood you correctly:- 我想你可以这样做......如果我理解你的话: -
$(".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");
});
Check out the fiddle for this: https://jsfiddle.net/kfrjzwmh/ 看看这个小提琴: https : //jsfiddle.net/kfrjzwmh/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.