javascript - كيفية التحقق من تحديد مربع الاختيار في جكري؟


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

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

ولكن الكود التالي يرجع false بشكل افتراضي:

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

كيف يمكنني الاستعلام عن الخاصية checked بنجاح؟




Answers


كيف يمكنني الاستعلام عن الخاصية المحددة بنجاح؟

ستعطيك خاصية checked من عنصر دوم في مربع الاختيار الحالة 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>




استخدام مسج هو () الدالة:

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



استخدام مسج> 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
}



مسج 1.6+

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

جكري 1.5 وأدناه

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

أي إصدار من مسج

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

كل الائتمان يذهب إلى شيان .




أنا باستخدام هذا وهذا يعمل على ما يرام تماما:

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

ملاحظة: إذا تم تحديد مربع الاختيار فإنه سيعكس صحيح خلاف ذلك غير معروف، لذا تحقق بشكل أفضل من قيمة "ترو".




منذ مسج 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 يعمل بشكل جيد. أنا لست متأكدا ما فاتني في ذلك الوقت اختبرت ذلك.

ملاحظة، وهذا هو الجواب يستخدم مايكروسوفت اياكس، وليس مسج




إذا كنت تستخدم إصدارا محدثا من مسج، يجب عليك الانتقال إلى طريقة .prop لحل مشكلتك:

$('#isAgeSelected').prop('checked') إذا تم تحديده و $('#isAgeSelected').prop('checked') . لقد أكدت ذلك وجئت عبر هذه القضية في وقت سابق. $('#isAgeSelected').attr('checked') و $('#isAgeSelected').is('checked') التي ليست إجابة $('#isAgeSelected').is('checked') للحالة. لذلك كما هو مبين أدناه.

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

نأمل أن يساعد:) - شكرا.




استعمال:

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

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

    $("#planned_checked").change(function() {
        if($(this).prop('checked') == true) {
            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




لا يمكن الاعتماد على استخدام معالج أحداث Click الخاصية خانة الاختيار، حيث يمكن تغيير الخاصية checked أثناء تنفيذ معالج الحدث نفسه!

من الناحية المثالية، كنت تريد أن تضع التعليمات البرمجية الخاصة بك في معالج حدث change مثل يتم إطلاقه في كل مرة يتم تغيير قيمة خانة الاختيار (بغض النظر عن كيفية القيام بذلك).

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

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



قررت أن نشر جوابا حول كيفية القيام بذلك نفس الشيء بالضبط دون مسج. فقط لأنني متمرد.

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 كس إلى لا شيء وضمن .

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" />

في شفرة مسج استخدمت المحدد التالي للتحقق مما إذا كان مربع الاختيار محددا أم لا، ويبدو أنه يعمل مثل السحر.

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

أنا متأكد من أنك يمكن أيضا استخدام معرف بدلا من كسكلاس،

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

آمل أن يكون هذا يساعدك.




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

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




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



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

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



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

/* isAgeSelected being id for checkbox */

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



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

طريقة للتحقق باستخدام مسج

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

راجع المثال أو المستند أيضا:




يمكنك استخدام هذا الرمز:

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



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

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

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




1) إذا كان ترميز هتمل هو:

<input type="checkbox"  />

أتر المستخدمة:

$(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) إذا كان ترميز هتمل هو:

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

أتر المستخدمة:

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

الدعامة المستخدمة:

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



تبديل: 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');
    };
});



الإجابة العليا لم تفعل ذلك بالنسبة لي. ومع ذلك،

<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، وإذا لم يكن فادوت عنصر سافيفورم.




استخدم هذا:

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

الطول أكبر من الصفر إذا تم تحديد مربع الاختيار.




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

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




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

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

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



على الرغم من أنك قد اقترحت حل جافا سكريبت لمشكلتك (عرض textbox عند تحديد checkbox )، يمكن حل هذه المشكلة فقط بواسطة كس . باستخدام هذا النهج، يعمل النموذج للمستخدمين الذين عطلوا جافا سكريبت.

بافتراض أن لديك هتمل التالي:

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

يمكنك استخدام كس التالية لتحقيق الوظيفة المطلوبة:

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

بالنسبة للسيناريوهات الأخرى، قد تفكر في محددات كس المناسبة.

هنا هو كمان لإثبات هذا النهج .




if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

أو

if($("#checkkBoxId").attr('checked') == true){
  alert("checked=true");
}



أنا أستخدم هذا:

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

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



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

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