.attr() and .removeAttr() to Control Checkbox Checking and Unchecking [jQuery]

In this article, we explain how to check and uncheck multiple checkboxes at once using jQuery’s .attr() and .removeAttr(). Controlling checkboxes is a script frequently used when you want to customize the behavior of forms. By utilizing jQuery, you can implement this functionality simply and efficiently.

CSS Description

First, let’s write some basic CSS to tidy up the overall appearance of the page. Customize as needed.

<style type="text/css">
<!--
body {
	font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.4em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:800px;
	margin:0 auto;
}
-->
</style>

This CSS sets the overall layout and font settings. The #idWrap is used as a container to center the content and neatly arrange the checkboxes and buttons.

Controlling Checkboxes Using .attr() and .removeAttr() in jQuery

Next, we load the jquery.min.js file. We will create a function to manipulate the checked state of checkboxes using JavaScript (jQuery). Use .attr() to check the checkboxes and .removeAttr() to uncheck them. To load the jQuery script, first, import jQuery from a CDN.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
function fncchk(param){
	if(param=="on"){
		$('input[type="checkbox"]').attr("checked", true);
	}else{
		$('input[type="checkbox"]').removeAttr('checked');
	}
}
</script>

In the function `fncchk`, it manipulates the checkboxes depending on the value of the `param`. If `param` is “on”, all checkboxes will be checked using `.attr()`, and if it’s “off”, they will be unchecked using `.removeAttr()`. The `.attr()` method is used to set attributes on elements, and `.removeAttr()` is used to remove specified attributes.

Implementing Checkbox Control with HTML

Now, let’s prepare checkboxes and write HTML that enables the buttons to check and uncheck them all at once.

<div id="idWrap">
	<h1>Using attr and removeAttr, clicking the buttons will check/uncheck all checkboxes.<br></h1>
<br />

	<div align="center">
    <input type="button" onClick="fncchk('on')" value="Check" />　　<input type="button" onClick="fncchk('off')" value="Uncheck" /><br /><br /><br />
<input type="checkbox" name="chk" value="1" />　
<input type="checkbox" name="chk" value="2" />　
<input type="checkbox" name="chk" value="3" />　
<input type="checkbox" name="chk" value="4" />
    </div>
</div>

Here, the `＜input type=”button”＞` has an `onClick` event that calls the `fncchk(‘on’)` or `fncchk(‘off’)` functions when clicked. Multiple checkboxes are prepared, and you can check or uncheck them all at once by clicking the buttons.

Demo Page to Check/Uncheck Multiple Checkboxes Using jQuery’s attr and removeAttr

You can access the demo page to try out the script introduced here by clicking the link below. Verify the behavior and deepen your understanding of the code.

Demo: Check/uncheck multiple checkboxes using jQuery’s attr and removeAttr

Controlling checkboxes is simple with default checkboxes, but if you are using custom-designed checkboxes with jQuery, the control may differ.

Advanced Example: Controlling Custom Checkboxes

Checkboxes are basic elements used to make form handling easier. However, in real-world web application development, custom-designed checkboxes are often used. Be aware that custom-designed checkboxes may require different control compared to default checkboxes.

For example, you can use .addClass() and .removeClass() to change the design of checkboxes with custom classes. Here is an example of how you can manage the state of customized checkboxes:

function fncchk(param) {
    if(param === "on") {
        $('input[type="checkbox"]').each(function() {
            $(this).attr("checked", true).addClass('checked-style');
        });
    } else {
        $('input[type="checkbox"]').each(function() {
            $(this).removeAttr('checked').removeClass('checked-style');
        });
    }
}

In this code, we use `.addClass(‘checked-style’)` and `.removeClass(‘checked-style’)` to change the appearance of checkboxes. For custom-designed checkboxes, you can manage their state with classes and dynamically change the design based on whether they are checked or unchecked.

Conclusion

In this article, we explained how to check and uncheck multiple checkboxes at once using jQuery’s .attr() and .removeAttr(). Being able to change the state of checkboxes in bulk is very useful when controlling forms flexibly.

There are various cases when it comes to controlling checkboxes, from simple checkboxes to customized designs. By understanding the basic operations and applying them as needed, you can create user-friendly forms.

If you have any questions or points you don’t understand regarding the sample code, feel free to contact us.

　
* If you use this example, please do so at your own risk.
Do not reuse the Google Analytics tag in the demo page’s head tag.