Кнопка jQuery check/uncheck onclick
У меня есть этот код, чтобы проверить/снять отметку с переключателя onclick.
Я знаю, что это не хорошо для пользовательского интерфейса, но мне это нужно.
$('#radioinstant').click(function() {
var checked = $(this).attr('checked', true);
if(checked){
$(this).attr('checked', false);
}
else{
$(this).attr('checked', true);
}
});
Вышеуказанная функция не работает.
Если я нажму кнопку, ничего не изменится. Он остается проверенным. Зачем? Где ошибка? Я не эксперт jQuery. Я на jQuery 1.3.2
Просто, чтобы быть четким. #radioinstant - это идентификатор переключателя.
Ответы
Ответ 1
Если все, что вы хотите сделать, это проверить флажок, не беспокойтесь об этом с помощью JQuery. Это функция по умолчанию для флажка при щелчке. Однако, если вы хотите делать дополнительные вещи, вы можете добавить их с помощью JQuery. До jQuery 1.9 вы можете использовать $(this).attr('checked');, чтобы получить значение вместо $(this).attr('checked', true);, так как второе установит значение.
Здесь - демонстрация скрипта, показывающая функциональность по умолчанию по умолчанию и то, что вы делаете с JQuery.
Примечание: После JQuery 1.6 вы должны использовать $(this).prop; вместо $(this).attr во всех трех местах (спасибо @Whatevo за указание этого и см. здесь для более подробной информации).
UPDATE:
Извините, пропустил требование, чтобы он был радиокнопкой. Вы по-прежнему можете рассмотреть этот флажок, но здесь - это обновленный код для версии радиоввода. Он работает, установив previousValue в качестве атрибута флажка, так как я не думаю, что prop поддерживается в 1.3.2. Вы также можете сделать это в переменной с областью, так как некоторым людям не нравится устанавливать случайные атрибуты в полях. Здесь - новый пример.
ОБНОВЛЕНИЕ 2:
Как заметил Джош, предыдущее решение работало только с одним переключателем. Здесь функция, которая делает группу радиостанций недоступными по их имени, и fiddle:
var makeRadiosDeselectableByName = function(name){
$('input[name=' + name + ']').click(function() {
if($(this).attr('previousValue') == 'true'){
$(this).attr('checked', false)
} else {
$('input[name=' + name + ']').attr('previousValue', false);
}
$(this).attr('previousValue', $(this).attr('checked'));
});
};
Ответ 2
Я расширил предыдущие предложения.
Это работает для меня, с несколькими радиостанциями, связанными с тем же именем.
$("input[type='radio']").click(function()
{
var previousValue = $(this).attr('previousValue');
var name = $(this).attr('name');
if (previousValue == 'checked')
{
$(this).removeAttr('checked');
$(this).attr('previousValue', false);
}
else
{
$("input[name="+name+"]:radio").attr('previousValue', false);
$(this).attr('previousValue', 'checked');
}
});
Ответ 3
Вместо того, чтобы получать проверенное значение, вы устанавливаете его с помощью:
var checked = $(this).attr('checked', true);
Чтобы правильно его получить:
var checked = $(this).attr('checked');
Рабочее решение (с несколькими переключателями, имеющими разные значения):
// select radio buttons group (same name)
var radioButtons = $("input[type='radio'][name='rr']");
// save initial ckecked states
var radioStates = {};
$.each(radioButtons, function(index, rd) {
radioStates[rd.value] = $(rd).is(':checked');
});
// handle click event
radioButtons.click(function() {
// check/unchek radio button
var val = $(this).val();
$(this).prop('checked', (radioStates[val] = !radioStates[val]));
// update other buttons checked state
$.each(radioButtons, function(index, rd) {
if(rd.value !== val) {
radioStates[rd.value] = false;
}
});
});
P.S.: $().attr следует использовать вместо $().prop для jquery < 1.6
Ответ 4
Лучшее и кратчайшее решение. Он будет работать для любой группы радиостанций (с тем же именем).
$(document).ready(function(){
$("input:radio:checked").data("chk",true);
$("input:radio").click(function(){
$("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk");
$(this).data("chk",!$(this).data("chk"));
$(this).prop("checked",$(this).data("chk"));
$(this).button('refresh'); // in case you change the radio elements dynamically
});
});
Дополнительная информация здесь.
Enjoy.
Ответ 5
Я считаю, что это проблема: если у вас есть несколько переключателей, и один из них щелкнут, нет никакого способа отменить выбор всех из них. Для этого необходим "ни один или только один" селектор, поэтому флажки не подходят. У вас может быть кнопка "clear" или что-то в этом духе, чтобы отменить выбор всех, но было бы неплохо просто щелкнуть выбранный переключатель, чтобы отменить его, и вернуться в состояние "none", чтобы вы не загромождали свой пользовательский интерфейс. дополнительный контроль.
Проблема с использованием обработчика кликов заключается в том, что к моменту его вызова радиокнопка уже проверена. Вы не знаете, является ли это начальным кликом или вторым кликом на уже отмеченном переключателе. Поэтому я использую два обработчика событий, mousedown для установки предыдущего состояния, а затем обработчик кликов, как указано выше:
$("input[name=myRadioGroup]").mousedown(function ()
{
$(this).attr('previous-value', $(this).prop('checked'));
});
$("input[name=myRadioGroup]").click(function ()
{
var previousValue = $(this).attr('previous-value');
if (previousValue == 'true')
$(this).prop('checked', false);
});
Ответ 6
toggleAttr() предоставляется этот очень красивый и крошечный плагин.
Пример кода
$('#my_radio').click(function() {
$(this).toggleAttr('checked');
});
/**
* toggleAttr Plugin
*/
jQuery.fn.toggleAttr = function(attr) {
return this.each(function() {
var $this = $(this);
$this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr);
});
};
Еще веселее, demo
Вы можете использовать свой радиокнопку внутри ярлыков или тегов кнопок и делать приятные вещи.
Ответ 7
Улучшенная версия ответа от Jurrie
$('#myRadio').off('click').on('click', function() {
if ($(this).data('checked')) {
$(this).removeAttr('checked');
$(this).data('checked', false);
} else {
$(this).data('checked', true);
}
});
Live Demo
Ответ 8
Протестировав некоторые из вышеперечисленных решений, которые не работали для меня на 100%, я решил создать свой собственный. Он создает новые клики для кликов после нажатия кнопки радиосвязи:
/**
* Radio select toggler
* enables radio buttons to be toggled when clicked
* Created by Michal on 09/05/2016.
*/
var radios = $('input[type=radio]');
/**
* Adds click listeners to all checkboxes to unselect checkbox if it was checked already
*/
function updateCheckboxes() {
radios.unbind('click');
radios.filter(':checked').click(function () {
$(this).prop('checked', false);
});
radios.click(function () {
updateCheckboxes();
});
}
updateCheckboxes();
Ответ 9
$ (Документ).ready (функция() { $ ( "Вход: радио: проверено") данные ( "ЧК", правда);.
$("input:radio").click(function(){
$("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk");
$(this).data("chk",!$(this).data("chk"));
$(this).prop("checked",$(this).data("chk"));
});
});
Ответ 10
- EDIT -
Похоже, ваш код заставляет радиоввод вести себя как входной флажок. Вы могли бы подумать только об использовании ввода флажка без необходимости jQuery. Однако, если вы хотите заставить, как сказал @manji, вам нужно сохранить значение за пределами обработчика кликов, а затем установить его при каждом нажатии на противоположное тому, что было в тот момент. Ответ @manji правильный, я бы просто добавил, что вы должны кэшировать объекты jQuery вместо повторного запроса DOM:
var $radio = $("#radioinstant"),
isChecked = $radio.attr("checked");
$radio.click(function() {
isChecked = !isChecked;
$(this).attr("checked", isChecked);
});
Ответ 11
DiegoP,
У меня была такая же проблема, пока я не понял, что проверка на флажке не исчезает, пока атрибут не будет удален. Это означает, что даже если проверенное значение сделано ложным, оно останется там.
Следовательно, используйте функцию removeAttr() и удалите проверенный атрибут, и он ОПРЕДЕЛЕННО РАБОТАЕТ.
Ответ 12
Если у вас все еще есть ответы, я обнаружил, что это работает со всеми переключателями:
<script type="text/javascript">
jQuery(document).ready(function ($){
var allRadios = $('input[type=radio]')
var radioChecked;
var setCurrent =
function(e) {
var obj = e.target;
radioChecked = $(obj).attr('checked');
}
var setCheck =
function(e) {
if (e.type == 'keypress' && e.charCode != 32) {
return false;
}
var obj = e.target;
if (radioChecked) {
$(obj).attr('checked', false);
} else {
$(obj).attr('checked', true);
}
}
$.each(allRadios, function(i, val){
var label = $('label[for=' + $(this).attr("id") + ']');
$(this).bind('mousedown keydown', function(e){
setCurrent(e);
});
label.bind('mousedown keydown', function(e){
e.target = $('#' + $(this).attr("for"));
setCurrent(e);
});
$(this).bind('click', function(e){
setCheck(e);
});
});
});
</script>
Ответ 13
Эта функция добавит чек/непроверенную ко всем радиокнопкам
jQuery(document).ready(function(){
jQuery(':radio').click(function()
{
if ((jQuery(this).attr('checked') == 'checked') && (jQuery(this).attr('class') == 'checked'))
{
jQuery(this).attr('class','unchecked');
jQuery(this).removeAttr('checked');
} else {
jQuery(this).attr('class','checked');
}//or any element you want
});
});
Ответ 14
Я взял fooobar.com/questions/135498/... и адаптировал его следующим образом
$(document).ready(function() {
$('body').on('click', 'input[type="radio"]', function() {
changeCheckedAttributes($(this));
});
function changeCheckedAttributes(elt) {
$("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeData("chk");
$("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeAttr("checked");
$("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).prop("checked", false);
$(elt).data("chk",!$(elt).data("chk"));
$(elt).prop("checked", true);
$(elt).attr("checked", $(elt).data("chk"));
}
});
Ответ 15
Я бы предложил следующее:
$('input[type="radio"].toggle').click(function () {
var $rb = $(this);
if ($rb.val() === 'on') {
$rb.val('off');
this.checked = false;
}
else {
$rb.val('on');
this.checked = true;
}
});
Ваш HTML будет выглядеть так:
<input type="radio" class="toggle" value="off" />
Ответ 16
У меня есть связанный, но другой сценарий. Вот что я делаю:
Примечание. Код для выбора/отмены выбора всех переключателей класса "containerRadio", когда выбран основной переключатель.
CODE
$('#selectAllWorkLot').click (function ()
{
var previousValue = $(this).attr('previousValue');
if (previousValue == 'checked')
{
resetRadioButtonForSelectAll();
//Unselect All
unSelectAllContainerRadioButtons();
}
else
{
$(this).attr('previousValue', 'checked');
//Select All
selectAllContainerRadioButtons();
}
});
function resetRadioButtonForSelectAll()
{
$('#selectAllWorkLot').removeAttr('checked');
$('#selectAllWorkLot').attr('previousValue', false);
//$('#selectAllWorkLot').prop('checked', false);
}
function selectAllContainerRadioButtons()
{
$('.containerRadio').prop('checked', true);
}
function unSelectAllContainerRadioButtons()
{
$('.containerRadio').prop('checked', false);
}
Ответ 17
У меня была связанная с этим проблема - мне пришлось открыть диалоговое окно из раскрывающегося списка на основе выбора из раскрывающегося списка. Я покажу один или два переключателя. Только один переключатель может быть активирован одновременно.
- В опции 1 будет отображаться два переключателя с 1-м радиоприемником
- В опции 2 появится второй переключатель и выбран.
script работает некоторое время, когда он вводит отмеченный флажок, но флажок по-прежнему не установлен
Я пошел в jQuery .prop(), похоже, что jquery .prop() .attr() имеет некоторые сложности с переключателями при использовании attr или prop. Итак, что я сделал, это вызвать щелчок на переключателе на основе значения Select.
Это устраняет необходимость использования attr или prop или использования при выключенном длинном коде.
myForm = $("#myForm");
if (argument === 'multiple') {
myForm.find('#radio1').parent('li').hide();
myForm.find('#radio2').trigger('click');
}
else{
myForm.find('#radio1').trigger('click');
myForm.find('#radio1').parent('li').show();
}
Не уверен, что это лучшая практика, но это - работает как шарм
Ответ 18
вот простое решение, я надеюсь, что это поможет вам. вот простой пример для улучшения ответа.
$('[type="radio"]').click(function () {
if ($(this).attr('checked')) {
$(this).removeAttr('checked');
$(this).prop('checked',false);
} else {
$(this).attr('checked', 'checked');
}
});
Демо
извините слишком поздно..:)
Ответ 19
Последнее решение - это то, что сработало для меня. У меня была проблема с Undefined и объектом объекта или всегда возвращалась false, а затем возвращалась true, но это решение работает при проверке и отмене проверки.
Этот код показывает поля при нажатии и скрытии полей при не проверке:
$("#new_blah").click(function(){
if ($(this).attr('checked')) {
$(this).removeAttr('checked');
var radioValue = $(this).prop('checked',false);
// alert("Your are a rb inside 1- " + radioValue);
// hide the fields is the radio button is no
$("#new_blah1").closest("tr").hide();
$("#new_blah2").closest("tr").hide();
}
else {
var radioValue = $(this).attr('checked', 'checked');
// alert("Your are a rb inside 2 - " + radioValue);
// show the fields when radio button is set to yes
$("#new_blah1").closest("tr").show();
$("#new_blah2").closest("tr").show();
}
Ответ 20
Решения, которые я пробовал из этого вопроса, не помогли мне. Из ответов, которые отчасти работали, я все же обнаружил, что мне нужно дважды щелкнуть ранее не отмеченную радиокнопку, чтобы снова проверить ее. В настоящее время я использую jQuery 3 +.
После беспорядка с попыткой заставить это работать с использованием атрибутов данных или других атрибутов, я, наконец, понял решение, используя вместо этого класс.
Для выбранного вами радиоввода введите класс checked например:
<input type="radio" name="likes_cats" value="Meow" class="checked" checked>
Вот jQuery:
$('input[type="radio"]').click(function() {
var name = $(this).attr('name');
if ($(this).hasClass('checked')) {
$(this).prop('checked', false);
$(this).removeClass('checked');
}
else {
$('input[name="'+name+'"]').removeClass('checked');
$(this).addClass('checked');
}
});
Ответ 21
Если вы используете клик и проверяете только, проверено ли радио, и затем отмените выбор, вы никогда не получите радиоприемник. Поэтому, возможно, проще всего использовать такие имена классов:
if($(this).hasClass('alreadyChecked')) {//it is already checked
$('.myRadios').removeClass('alreadyChecked');//remove from all radios
$(this).prop('checked', false);//deselect this
}
else {
$('.myRadios').removeClass('alreadyChecked');//remove from all
$(this).addClass('alreadyChecked');//add to only this
}
Ответ 22
Самое простое решение. Для радио и чекбоксов.
$('body').on('click', 'input[type="checkbox"]', function(){
if ($(this).attr('checked')){
$( this ).attr( 'checked', false);
} else {
$( this ).attr( 'checked', true);
}
});
$('body').on('click', 'input[type="radio"]', function(){
var name = $(this).attr('name');
$("input[name="+name+"]:radio").attr('checked', false);
$( this ).attr( 'checked', true);
});
