How to change the value of a check box onClick usi

Question

Here I am trying to change the value of the following check box while clicking on it. In the code below I tried to change the value of the checkbox to 1 and change the value to 0 when unchecked. But it takes only the false condition, when the checkbox is unchecked the value changes to 0 but when checked its not changing to 1. Any suggestions how to fix this out ?

<input type="checkbox" id="read" name="permission[]" onClick="($(this).checked)?$(this).attr('value',1):$(this).attr('value',0)"/>

Answer 1

Typically you don't want to change the value attribute of checkboxes (or radio buttons). This invites hard-to-trace bugs in your web application.

If you want to assign a specific value to a field when it is checked, you can also consider introducing a hidden input <input type="hidden"...> and assign the value to it, instead of to the checkbox.

Answer 2

You can use this simple click function to achieve it.

HTML:

<input type="checkbox" id="read" name="permission[]" value="0"/>

Jquery:

$("#read").click(function() {

		if($("#read").val()==0)
		{
		 $("#read").val(1);
		}
		else
		{
		 $("#read").val(0);
		}
		alert($("#read").val());
		
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="read" name="permission[]" value="0"/> 
Click the check box to toggle the value 0 and 1

Answer 3

I don't really understand why you would want to do this (the checkbox's value won't be submitted anyways when it's unchecked).

The checked property on the DOM element will always tell you whether it is checked or not. So you can either get this.checked (Javascript DOM) or $(this).prop('checked') (jQuery wrapper).

If you really need to, you should do this:

onclick="$(this).attr('value', this.checked ? 1 : 0)"

or even

onclick="$(this).val(this.checked ? 1 : 0)"

or even better, don't use inline event handlers (like onclick), but use jQuery's event handling wrappers (.on('click') or .click() in older versions).

jsFiddle Demo with jQuery event handling

---

The problem with your approach

You are using $(this).checked to get the state of your checkbox. The jQuery object (the one that's returned by the $ function) does not have a checked property, so it will be undefined. In Javascript, undefined is a falsy value, that's why your checkbox's value is always 0.