显示/隐藏带有匹配复选框的内容

Posted 2021-02-24

This function follows the following naming conventions: Give your checkboxes ID tags of "[contenttitle]trigger", where [contenttitle] is whatever you like. Then, give your hide-able content classes that match, without the "trigger". This function will look at the checkbox ID and checked state, and then show/hide the content with those classes accordingly.

So for example, you have a checkbox with the ID "content4trigger", and two divs with the class "content4". This will show and hide the divs based on the id of the checkbox.

function checkToggler(element) {
	var actionItem = $(element).attr("id");
	actionItem = actionItem.substring(0, actionItem.indexOf("trigger"));
 
	if( $(element).is(':checked') ) {
		$("."+actionItem).show();
	} else {
		$("."+actionItem).hide();
	}
}
 
// You can call the function like this:
 
$(".selectionBox input").change(function(){
	checkToggler( $(this) );
});