كيف تتحقق من تحديد مربع اختيار في jQuery؟


Answers

استخدم وظيفة jQuery's is() :

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

أحتاج إلى التحقق من الخاصية checked لمربع الاختيار وتنفيذ إجراء بناءً على الخاصية المحددة باستخدام jQuery.

على سبيل المثال ، إذا تم تحديد مربع اختيار العمر ، فحينئذٍ أحتاج إلى عرض مربع نص لإدخال العمر ، وإلا إخفاء مربع النص.

لكن التعليمة البرمجية التالية بإرجاع false افتراضياً:

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

كيف يمكنني الاستعلام بنجاح عن العقار checked ؟




هذا العمل بالنسبة لي:

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

حيث يتم isAgeSelected التحكم.

أيضا ، answer @ karim79 يعمل بشكل جيد. لست متأكدا ما فاتني في الوقت الذي اختبرت فيه.

ملاحظة ، هذا الجواب يستخدم Microsoft Ajax ، وليس jQuery




هذا المثال للزر.

حاول القيام بما يلي:

<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);
    }
});
});



هناك العديد من الطرق للتحقق مما إذا كان مربع الاختيار محددًا أم لا:

طريقة للتحقق من استخدام jQuery

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

تحقق من مثال أو وثيقة أيضا:




يمكنك استخدام:

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

كلاهما يجب أن يعمل.




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

هذا يعود true إذا تم التحقق من المدخلات false إذا لم يكن كذلك.




طريقي للقيام بذلك هو:

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



أعتقد أنه يمكنك فعل هذا:

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



الإجابة العليا لم تفعل ذلك من أجلي. هذا على الرغم من:

<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') . إذا كان ثم يتلاشى عنصر #saveForm ، وإذا لم يكن fadeOut عنصر saveForm.




أعتقد أنه سيكون البسيط

$('#isAgeSelected').change(function() {
    if($(this).is(":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="isAgeSelected" value="1" /> <br/>
 <input type="textbox" id="txtAge" />

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



منذ 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")



هذه طريقة مختلفة للقيام بنفس الشيء:

$(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>




jQuery 1.6+

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

jQuery 1.5 وأدناه

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

أي إصدار من jQuery

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

كل الفضل يذهب الى Xian .