Як перевірити, чи встановлено прапорець у jQuery?

Мені потрібно перевірити checkedвластивість прапорець і виконати дію, засновану на позначеній властивості, використовуючи jQuery.

Наприклад, якщо прапорець "Вік" встановлений, мені потрібно показати текстове поле, щоб ввести вік, інакше приховати текстове поле.

Але наступний код повертається falseза замовчуванням:

if ($('#isAgeSelected').attr('checked'))
{
    $("#txtAge").show();
}
else
{
    $("#txtAge").hide();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" id="isAgeSelected"/>

<div id="txtAge" style="display:none">
Age is selected
</div>

Як я успішно запитую checkedвласність?

Як я успішно запитую перевірений ресурс?

checkedВластивість Прапорець DOM елемента дасть вам checkedстан елемента.

Враховуючи існуючий код, ви можете зробити це:

if(document.getElementById('isAgeSelected').checked) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Однак, є набагато красивіший спосіб зробити це, використовуючи toggle:

$('#isAgeSelected').click(function() {
    $("#txtAge").toggle(this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Використовуйте функцію jQuery's () :

if($("#isAgeSelected").is(':checked'))
    $("#txtAge").show();  // checked
else
    $("#txtAge").hide();  // unchecked

Використовуючи jQuery> 1.6

<input type="checkbox" value="1" name="checkMeOut" id="checkMeOut" checked="checked" />

// traditional attr
$('#checkMeOut').attr('checked'); // "checked"
// new property method
$('#checkMeOut').prop('checked'); // true

Використовуючи новий метод властивості:

if($('#checkMeOut').prop('checked')) {
    // something when checked
} else {
    // something else when not
}

jQuery 1.6+

$('#isAgeSelected').prop('checked')

jQuery 1.5 і нижче

$('#isAgeSelected').attr('checked')

Будь-яка версія jQuery

// Assuming an event handler on a checkbox
if (this.checked)

Вся заслуга належить Сіану .

Я використовую це, і це працює абсолютно чудово:

$("#checkkBoxId").attr("checked") ? alert("Checked") : alert("Unchecked");

Примітка: Якщо прапорець встановлений, він повернеться істинно, інакше невизначений, тож краще встановіть значення "ІСТИНА".

Використання:

<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

$("#planned_checked").change(function() {
    if($(this).prop('checked')) {
        alert("Checked Box Selected");
    } else {
        alert("Checked Box deselect");
    }
});

    $("#planned_checked").change(function() {
        if($(this).prop('checked')) {
            alert("Checked Box Selected");
        } else {
            alert("Checked Box deselect");
        }
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="planned_checked" checked id="planned_checked"> Planned

Починаючи з jQuery 1.6, поведінка jQuery.attr()змінилася, і користувачам рекомендується не використовувати її для отримання перевіреного стану елемента. Натомість слід використовувати jQuery.prop():

$("#txtAge").toggle(
    $("#isAgeSelected").prop("checked") // For checked attribute it returns true/false;
                                        // Return value changes with checkbox state
);

Ще дві можливості:

$("#txtAge").get(0).checked
$("#txtAge").is(":checked")

Це працювало для мене:

$get("isAgeSelected ").checked == true

Де isAgeSelectedідентифікатор управління.

Крім того , @ karim79 - х відповідь працює відмінно. Я не впевнений, що я пропустив під час тестування.

Зауважте, що ця відповідь використовує Microsoft Ajax, а не jQuery

Якщо ви використовуєте оновлену версію jquery, вам слід скористатися .propметодом вирішення проблеми:

$('#isAgeSelected').prop('checked')повернеться, trueякщо встановлено прапорець і falseякщо його не встановлено. Я підтвердив це, і я стикався з цим питанням раніше. $('#isAgeSelected').attr('checked')і $('#isAgeSelected').is('checked')повертається, undefinedщо не є гідною відповіддю для ситуації. Так роби, як зазначено нижче.

if($('#isAgeSelected').prop('checked')) {
    $("#txtAge").show();
} else {
    $("#txtAge").hide();
}

Сподіваюся, що це допомагає:) - Дякую.

Використання Clickобробника подій для властивості прапорця недостовірне, оскільки checkedвластивість може змінюватися під час виконання самого обробника подій!

В ідеалі ви хочете вставити свій код у changeобробник подій, такий як він знімається щоразу, коли значення прапорця змінюється (незалежно від того, як це робиться).

$('#isAgeSelected').bind('change', function () {

   if ($(this).is(':checked'))
     $("#txtAge").show();
   else
     $("#txtAge").hide();
});

Використання:

<input type="checkbox" id="abc" value="UDB">UDB
<input type="checkbox" id="abc" value="Prasad">Prasad

$('input#abc').click(function(){
  if($(this).is(':checked'))
  {
    var checkedOne=$(this).val()
    alert(checkedOne);

    // Do some other action
  }
})

Це може допомогти, якщо ви хочете, щоб виконати необхідні дії лише тоді, коли ви поставите прапорець не в той момент, коли ви знімете чек.

Я вирішив опублікувати відповідь про те, як зробити таку саму річ без jQuery. Просто тому, що я бунтівник.

var ageCheckbox = document.getElementById('isAgeSelected');
var ageInput = document.getElementById('txtAge');

// Just because of IE <333
ageCheckbox.onchange = function() {
    // Check if the checkbox is checked, and show/hide the text field.
    ageInput.hidden = this.checked ? false : true;
};

Спочатку ви отримуєте обидва елементи за їх ідентифікатором. Потім ви призначаєте onchangeподію прапорця функцією, яка перевіряє, чи перевірили прапорець прапорець і встановив hiddenвластивість текстового поля віку. У цьому прикладі з використанням потрійного оператора.

Ось вам скрипка для тестування.

Додаток

Якщо сумісність між веб-браузером є проблемою, то я пропоную встановити displayвластивість CSS жодним і вбудованим .

elem.style.display = this.checked ? 'inline' : 'none';

Повільніший, але сумісний із браузером.

Я вважаю, ви могли це зробити:

if ($('#isAgeSelected :checked').size() > 0)
{
    $("#txtAge").show(); 
} else { 
    $("#txtAge").hide();
}

Я зіткнувся з точно таким же питанням. У мене є прапорець ASP.NET

<asp:CheckBox ID="chkBox1" CssClass='cssChkBox1' runat="server" />

У коді jQuery я використав наступний селектор, щоб перевірити, чи встановлено прапорець, чи ні, і, здається, він працює як шарм.

if ($("'.cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Я впевнений, що ви можете також використовувати ідентифікатор замість CssClass,

if ($("'#cssChkBox1 input[type=checkbox]'").is(':checked'))
{ ... } else { ... }

Я сподіваюся, що це вам допоможе.

Існує багато способів перевірити, чи прапорець встановлений чи ні:

Спосіб перевірки за допомогою jQuery

if (elem.checked)
if ($(elem).prop("checked"))
if ($(elem).is(":checked"))
if ($(elem).attr('checked'))

Перевірте приклад або також документ:

• http://api.jquery.com/attr/

• http://api.jquery.com/prop/

Цей код вам допоможе

$('#isAgeSelected').click(function(){
   console.log(this.checked);
   if(this.checked == true) {
        $("#txtAge").show();
    } else {
       $("#txtAge").hide();
   }
});

Це працює для мене:

/* isAgeSelected being id for checkbox */

$("#isAgeSelected").click(function(){
  $(this).is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();
});

Це кілька різних методів зробити те саме:

$(document).ready(function (){

    $('#isAgeSelected').click(function() {
        // $("#txtAge").toggle(this.checked);

        // Using a pure CSS selector
        if ($(this.checked)) {
            alert('on check 1');
        };

        // Using jQuery's is() method
        if ($(this).is(':checked')) {
            alert('on checked 2');
        };

        //  // Using jQuery's filter() method
        if ($(this).filter(':checked')) {
            alert('on checked 3');
        };
    });
});

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<input type="checkbox" id="isAgeSelected"/>
<div id="txtAge" style="display:none">Age is something</div>

Використовуй це:

if ($('input[name="salary_in.Basic"]:checked').length > 0)

Довжина більше нуля, якщо прапорець встановлений.

Мій спосіб зробити це:

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

$(selector).attr('checked') !== undefined

Це повертається, trueякщо вхід перевірено, а falseякщо ні.

$(document).ready(function() {    
    $('#agecheckbox').click(function() {
        if($(this).is(":checked"))
        {
            $('#agetextbox').show();
        } else {
            $('#agetextbox').hide();
        }
    });
});

Ви можете використовувати:

  if(document.getElementById('isAgeSelected').checked)
    $("#txtAge").show();  
  else
    $("#txtAge").hide();

if($("#isAgeSelected").is(':checked'))
  $("#txtAge").show();  
else
  $("#txtAge").hide();

Вони обоє повинні працювати.

1) Якщо ваша розмітка HTML:

<input type="checkbox"  />

attr використовується:

$(element).attr("checked"); // Will give you undefined as initial value of checkbox is not set

Якщо використовується опора:

$(element).prop("checked"); // Will give you false whether or not initial value is set

2) Якщо ваша розмітка HTML:

 <input type="checkbox"  checked="checked" />// May be like this also  checked="true"

attr використовується:

$(element).attr("checked") // Will return checked whether it is checked="true"

Реквізит використовується:

$(element).prop("checked") // Will return true whether checked="checked"

Цей приклад для кнопки.

Спробуйте наступне:

<input type="button" class="check" id="checkall" value="Check All" />  &nbsp; <input type="button" id="remove" value="Delete" /> <br/>

<input type="checkbox" class="cb-element"  value="1" /> Checkbox  1 <br/>
<input type="checkbox" class="cb-element"  value="2" /> Checkbox  2 <br/>
<input type="checkbox" class="cb-element"  value="3" /> Checkbox  3 <br/>


$('#remove').attr('disabled', 'disabled'); 

$(document).ready(function() {  

    $('.cb-element').click(function() {

        if($(this).prop('checked'))
        {
            $('#remove').attr('disabled', false);
        }
        else
        {
            $('#remove').attr('disabled', true);
        }
    });   

    $('.check:button').click(function()
{
    var checked = !$(this).data('checked');
    $('input:checkbox').prop('checked', checked);
    $(this).data('checked', checked);

    if(checked == true)
    {
        $(this).val('Uncheck All');
         $('#remove').attr('disabled', false);
    }

    else if(checked == false)
    {
        $(this).val('Check All');
        $('#remove').attr('disabled', true);
    }
});
});

Верхня відповідь не зробила це для мене. Це все-таки було зроблено:

<script type="text/javascript">
    $(document).ready(function(){

        $("#li_13").click(function(){
            if($("#agree").attr('checked')){
                $("#saveForm").fadeIn();
            }
            else
            {
                $("#saveForm").fadeOut();
            }
        });
    });
</script>

В основному, коли елемент # li_13 натискається, він перевіряє, чи елемент # погоджується (що є прапором) перевіряється за допомогою .attr('checked')функції. Якщо він тоді fadeIn елемент #saveForm, а якщо не fadeOut елемент saveForm.

Я використовую це:

 <input type="checkbox" id="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

 $("#isAgeSelected").is(':checked') ? $("#txtAge").show() : $("#txtAge").hide();

Незважаючи на те, що ви запропонували рішення JavaScript для своєї проблеми (відображення, textboxколи checkboxє checked), цю проблему можна вирішити просто css . При такому підході ваша форма працює для користувачів, які відключили JavaScript.

Припустимо, що у вас є такий HTML:

<label for="show_textbox">Show Textbox</label>
<input id="show_textbox" type="checkbox" />
<input type="text" />

Ви можете використовувати наступний CSS для досягнення потрібної функціональності:

 #show_textbox:not(:checked) + input[type=text] {display:none;}

Для інших сценаріїв ви можете придумати відповідних CSS-селекторів.

Ось Fiddle, щоб продемонструвати такий підхід .

Перемикання: 0/1 або інше

<input type="checkbox" id="nolunch" />
<input id="checklunch />"

    $('#nolunch').change(function () {
    if ($(this).is(':checked')) {
        $('#checklunch').val('1');
    };
    if ($(this).is(':checked') == false) {
        $('#checklunch').val('0');
    };
});

Я думаю, що це буде найпростіше

$('#isAgeSelected').change(function() {
    if($(this).is(":checked")) {
        $('#txtAge').show();
    }
else{
        $('#txtAge').hide();
    }                                          
});