Как изменить значение флажка onClick с помощью JQuery? - PullRequest
Новая
       14

Как изменить значение флажка onClick с помощью JQuery?

8 голосов
/ 04 февраля 2012

Здесь я пытаюсь изменить значение следующего флажка, нажимая на него.В приведенном ниже коде я попытался изменить значение флажка на 1 и изменить значение на 0, когда не проверено.Но это принимает только ложное условие, когда флажок снят, значение меняется на 0, но когда установлен флажок, оно не меняется на 1. Есть предложения, как это исправить? 

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

Ответы [ 3 ]

21 голосов
/ 04 февраля 2012

Я не совсем понимаю, почему вы хотите это сделать (значение флажка не будет отправлено в любом случае, если оно не отмечено).

checkedсвойство элемента DOM всегда сообщит вам, проверено оно или нет.Таким образом, вы можете получить this.checked (Javascript DOM) или $(this).prop('checked') (jQuery wrapper).

Если вам действительно это нужно, вам следует сделать следующее: 

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

или даже 

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

или даже лучше, не использует встроенные обработчики событий (например, onclick), но использует оболочки обработки событий jQuery (* 1024)* или .click() в старых версиях).

jsFiddle Демонстрация с обработкой событий jQuery

Проблема с вашимподход

Вы используете $(this).checked, чтобы получить состояние вашего флажка.Объект jQuery (тот, который возвращается функцией $) не имеет свойства checked, поэтому он будет undefined.В Javascript undefined - это значение falsy , поэтому значение вашего флажка всегда равно 0.

0 голосов
/ 13 июня 2016

Вы можете использовать эту простую функцию щелчка, чтобы достигнуть этого.

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
0 голосов
/ 04 февраля 2012

Как правило, вы не хотите изменять атрибут значения флажков (или переключателей). Это приводит к появлению трудных для отслеживания ошибок в вашем веб-приложении.

Если вы хотите присвоить определенное значение полю при его проверке, вы можете также рассмотреть возможность ввода скрытого ввода <input type="hidden"...> и присвоить ему значение вместо флажка.

...