it-swarm.asia

كيفية التحقق من تحديد خانة الاختيار في مسج؟

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

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

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

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

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

4217
Prasad

هذا عملت لي:

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

حيث isAgeSelected هو معرف عنصر التحكم.

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

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

90
Prasad

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

ستعطيك الخاصية 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>
3258
karim79

استخدم jQuery's is () function:

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

باستخدام 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
}
512
SeanDowney

مسج 1.6+

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

مسج 1.5 وتحت

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

أي إصدار من jQuery

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

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

207
ungalcrys

أنا أستخدم هذا وهذا يعمل بشكل جيد للغاية:

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

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

155
Pradeep

استعمال:

<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
133
Lalji Dhameliya

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

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

$('#isAgeSelected').prop('checked') سيعود true إذا تم تحديده و false إذا لم يتم التحقق منه. لقد أكدت ذلك وصادفت هذه المشكلة في وقت سابق. $('#isAgeSelected').attr('checked') و $('#isAgeSelected').is('checked') تُرجع undefined وهو ليس إجابة جديرة بالموقف. هكذا تفعل على النحو الوارد أدناه.

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

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

84
Rajesh Omanakuttan

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

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

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

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

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

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 لمربع الاختيار الخاص بوظيفة checkbox التي تتحقق مما إذا كانت خانة الاختيار قد تم تحديدها وتعيين الخاصية hidden الخاصة بحقل النص القديم بشكل مناسب. في هذا المثال باستخدام عامل التشغيل الثلاثي.

هنا كمان بالنسبة لك لاختباره.

إضافة

إذا كانت التوافق عبر المستعرض مشكلة ، فإني أقترح تعيين خاصية CSS display على بلا و مضمنة.

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

أبطأ ولكن عبر متصفح متوافق.

51
Octavian Damiean

استعمال:

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

يمكن أن يساعد هذا إذا كنت تريد تنفيذ الإجراء المطلوب فقط عند تحديد المربع وليس في الوقت الذي تزيل فيه العلامة.

50
UDB

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

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

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

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

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

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

43
Parth Chavda

ركضت إلى نفس المشكلة بالضبط. لدي مربع الاختيار 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 { ... }

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

41
Nertim

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

$(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>
40
Sangeet Shah

هذا يعمل لي:

/* isAgeSelected being id for checkbox */

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

استخدم هذا:

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

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

34
Hamid N K

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

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

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

if ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}
32
Dalius I
$(selector).attr('checked') !== undefined

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

31
fe_lix_

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

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

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

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

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

1) إذا كانت علامة HTML الخاصة بك هي:

<input type="checkbox"  />

attr المستخدمة:

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

إذا تم استخدام prop:

$(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"
25
Somnath Kharat

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

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

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

الجواب العلوي لم يفعل ذلك بالنسبة لي. هذا على الرغم من:

<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 فيتم حفظ العنصر.

24
MDMoore313

على الرغم من أنك اقترحت حلاً جافا سكريبت لمشكلتك (عرض textbox عندما يكون checkboxchecked) ، يمكن حل هذه المشكلة فقط بواسطة 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 لإظهار هذا النهج .

21
Ormoz

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

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

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

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

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

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

أنا متأكد من أنها ليست بعض الوحي ، لكنني لم أرها كلها في مثال واحد:

محدد لجميع خانات الاختيار المحددة (على الصفحة):

$('input[type=checkbox]:checked')
17
Tsonev
if($("#checkkBoxId").is(':checked')){
  alert("Checked=true");
}

أو

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

تضمين jQuery من نظام الملفات المحلي. لقد استخدمت CDN / Google ، وهناك أيضًا العديد من شبكات CDN للاختيار من بينها.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

سيتم تنفيذ الرمز بمجرد النقر فوق خانة اختيار داخل فئة mycheck. إذا تم تحديد مربع الاختيار الحالي الذي تم النقر عليه ، فسيؤدي ذلك إلى تعطيل جميع العناصر الأخرى وتمكين المربع الحالي. إذا لم يتم تحديد الخانة الحالية ، فسيمكن مرة أخرى جميع خانات الاختيار لإعادة الفحص.

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

        var checkbox_selector = '.mycheck input[type=checkbox]';

        $(checkbox_selector).click(function() {
            if ($($(this)).is(':checked')) {

                // Disable all checkboxes
                $(checkbox_selector).attr('disabled', 'disabled');

                // Enable current one
                $($(this)).removeAttr('disabled');
            }
            else {
                // If unchecked open all checkbox
                $(checkbox_selector).removeAttr('disabled');
            }
        });
    });
</script>

شكل بسيط للاختبار

<form method="post" action="">
    <div class="mycheck">
        <input type="checkbox" value="1" /> Television
        <input type="checkbox" value="2" /> Computer
        <input type="checkbox" value="3" /> Laptop
        <input type="checkbox" value="4" /> Camera
        <input type="checkbox" value="5" /> Music Systems
    </div>
</form>

شاشة الإخراج:

Enter image description here

16
Madan Sapkota

يتم تعيين سمة checked الخاصة بـ input type="checkbox" مع الخاصية defaultChecked ، لا مع خاصية checked.

لذا عند القيام بشيء ما في الصفحة عندما يتم تحديد خانة اختيار بدون تحديد ، استخدم طريقة prop() بدلاً من ذلك. يجلب قيمة الخاصية ويتغير مع تغير حالة مربع الاختيار.

إن استخدام attr() أو getAttribute (في جافا سكريبت خالص) في هذه الحالات ليست الطريقة الصحيحة للقيام بالأشياء.

إذا كانت elem هي مربع الاختيار المعني ، فافعل شيئًا مثل هذا لجلب القيمة:

elem.checked

أو

$(elem).prop('checked')
15
subham.saha1004

لقد قمت بالتحقق في Firefox 9.0.1 من أن ما يلي يعمل على اكتشاف حالة تغيير خانة الاختيار:

$("#mycheckbox").change(function() {
    var value = $(this).prop("checked") ? 'true' : 'false';                     
    alert(value);
});
15
Joshua Harris

الآلي

$(document).ready(function()
{
    $('#isAgeSelected').change(function()
    {
        alert( 'value =' + $('#chkSelect').attr('checked') );
    });
});

HTML

<b> <input type="isAgeSelected" id="chkSelect" /> Age Check </b>

<br/><br/>

<input type="button" id="btnCheck" value="check" />

مسج

$(document).ready(function()
{
    $('#btnCheck').click(function()
    {
        var isChecked = $('#isAgeSelected').attr('checked');

        if (isChecked == 'checked')
            alert('check-box is checked');
        else
            alert('check-box is not checked');
    })
});

اياكس

function check()
{
    if (isAgeSelected())
        alert('check-box is checked');
    else
        alert('check-box is not checked');
}

function isAgeSelected()
{
    return ($get("isAgeSelected").checked == true);
}
13
Khaled.K

هذا هو الحد الأدنى من الكود الذي أعتقد أنني بحاجة إلى فعل شيء مثل هذا بشكل فعال. لقد وجدت هذه الطريقة مفيدة ؛ تقوم بإرجاع صفيف من خانات الاختيار التي تم تحديدها ومن ثم يمكنك استخدام قيمتها (يستخدم هذا الحل jQuery):

// This is how you get them
var output = "";
var checkedBoxes = $("DivCheckBoxesAreIn").children("input:checked");
if(checkedBoxes.length <= 0) {
    alert('Please select check boxes');
    return false;
};

// And this is how you use them:
checkedBoxes.each(function() {
    output +=  this.value + ", ";
};

طباعة "الإخراج" ستمنحك قائمة مفصولة بفواصل لقيمك.

12
Daryl H

كنت أواجه نفس المشكلة ولا يبدو أن أيًا من الحلول المنشورة يعمل ، وبعد ذلك اكتشفت أن السبب في ذلك هو أن ASP.NET يقدم عنصر التحكم CheckBox باعتباره SPAN مع INPUT من الداخل ، وبالتالي فإن CheckBox ID هو في الواقع معرف SPAN ، وليس مدخلات ، لذلك يجب عليك استخدام:

$('#isAgeSelected input')

عوضا عن

$('#isAgeSelected')

ثم يجب أن تعمل كافة الطرق المذكورة أعلاه.

12
tsw_mik

فيما يلي مثال يتضمن تهيئة إظهار/إخفاء لمطابقة حالة مربع الاختيار عند تحميل الصفحة ؛ مع الأخذ في الاعتبار أن فايرفوكس يتذكر حالة خانات الاختيار عند تحديث الصفحة ، لكن لن يتذكر حالة العناصر الظاهرة/المخفية.

$(function() {
    // initialise visibility when page is loaded
    $('tr.invoiceItemRow').toggle($('#showInvoiceItems').attr('checked'));
    // attach click handler to checkbox
    $('#showInvoiceItems').click(function(){ $('tr.invoiceItemRow').toggle(this.checked);})
});

(بمساعدة من الإجابات الأخرى على هذا السؤال)

12
Tim Abell

كان هذا الحل الخاص بي:

$('#vcGoButton').click(function () {
    var buttonStatus = $('#vcChangeLocation').prop('checked');
    console.log("Status is " + buttonStatus);
    if (buttonStatus) {
        var address = $('#vcNewLocation').val();
        var cabNumber = $('#vcVehicleNumber').val();
        $.get('postCabLocation.php',
              {address: address, cabNumber: cabNumber},
              function(data) {
                  console.log("Changed vehicle " + cabNumber + " location to " + address );
              });
    }
    else {
        console.log("VC go button clicked, but no location action");
    }
});
10
cauleyfj

ببساطة استخدامه مثل أدناه

 $('#isAgeSelected').change(function() {
     if ($(this).is(":checked")) { // or if($("#isAgeSelected").attr('checked') == true){
         $('#txtAge').show();
     } else {
         $('#txtAge').hide();
     }
 });
10
Himanshu Upadhyay

استعمال:

$(this).toggle($("input:checkbox", $(this))[0].checked);

عندما تختار خارج السياق ، تذكر أنك بحاجة إلى [0] للوصول إلى مربع الاختيار.

9
Richard Maxwell

باستخدام pure JavaScript :

let checkbox = document.getElementById('checkboxID');

if(checkbox.checked) {
  alert('is checked');
} else {
  alert('not checked yet');
}
9
Carlos Abraham

واضعة:

$("#chkmyElement")[0].checked = true;

جالبة:

if($("#chkmyElement")[0].checked) {
   alert("enabled");
} else {
   alert("disabled");
}
9
JJ_Coder4Hire

أنا أفضل بالفعل الحدث change.

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

العرض التوضيحي Fiddle

8
Tarion

جرب هذا،

$('#isAgeSelected').click(function() {
    if(this.checked){
        $("#txtAge").show();
    } else{
        $("#txtAge").hide();
    } 
});
8
Mohammed Safeer

أنا أستخدم jQuery 1.11.1 وكان لدي مشاكل في إعداد وقراءة قيمة مربع الاختيار أيضًا.

لقد حللت أخيرًا بواسطة هاتين الوظيفتين:

function setCheckboxValue(checkBoxId, checked) {
    if (checkBoxId && (checked === true || checked === false)) {
        var elem = $('#' + checkBoxId);
        if (checked === true) {
            elem.attr('checked', 'checked');
        } else {
            elem.removeAttr('checked');
        }
    }
}

function isChecked(checkBoxId) {
    return $('#' + checkBoxId).attr('checked') != null;
}

قد تبدو متسخة قليلاً ولكنها تحل جميع المشكلات السلكية التي واجهتها بين أنواع مختلفة من المتصفحات.

7
Jacob

إرجاع محدد كائنات متعددة ، ويجب أن يأخذ العنصر الأول في الصفيف:

// Collection
var chckremember = $("#chckremember");


// Result boolen
var ischecked=chckremember[0].checked;
7
zamoldar
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
6
user1996628

ماذا عن هذا الحل؟

$("#txtAge")[
    $("#isAgeSelected").is(':checked') ?
    'show' :
    'hide'
]();
4
Iter Ator

يمكنك تجربة هذا الكود:

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

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

E.X -

1) تشغيل عند التحميل للحصول على قيمة خانة الاختيار إذا تم تحديد خانة الاختيار العمر ، فأنا بحاجة لإظهار مربع نص للدخول إلى العمر ، وإخفاء مربع النص.

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

لذلك الكود لا يُرجع خطأ بشكل افتراضي:

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

<html>
        <head>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        </head>
        <body>
            <h1>Jquery Demo</h1>
            <input type="checkbox" name="isAge" checked id="isAge"> isAge <br/>
            <div id="Age" style="display:none">
              <label>Enter your age</label>
              <input type="number" name="age">
            </div>
            <script type="text/javascript">
            if(document.getElementById('isAge').checked) {
                $('#Age').show();
            } else {
                $('#Age').hide();
            }   
            $('#isAge').click(function() {
                if(document.getElementById('isAge').checked) {
                    $('#Age').show();
                } else {
                    $('#Age').hide();
                }
            }); 
            </script>
        </body>
    </html>

إليك نسخة معدلة: https://jsfiddle.net/sedhal/0hygLtrz/7/

3
sedhal soni

إذا كنت بحاجة إلى معرفة ما إذا كان مربع الاختيار محددًا في javascript ، فيجب عليك استخدام هذا الرمز.

let checkbox =document.getElementById('myCheckboxId');
if(checkbox.checked) {
    alert("element is checked");
} else {
    alert("element is  ot checked");
}
2
Ir Calif

بالنسبة للإصدارات الأقدم من jQuery ، كان علي استخدام التالي ،

$('#change_plan').live('click', function() {
     var checked = $('#change_plan').attr('checked');
     if(checked) {
          //Code       
     }
     else {
          //Code       
     }
});
2
Vajira Lasantha
if( undefined == $('#isAgeSelected').attr('checked') ) {
    $("#txtAge").hide();
} else {
    $("#txtAge").show();
}
2
darhamid
$('#chk').change(function() { 
    (this.checked)? alert('true') : alert('false');
});



($('#chk')[0].checked)? alert('true') : alert('false');
1
argie cruz

في حال كنت بحاجة إلى استخدام فئة CSS كمحدد jQuery ، يمكنك القيام بما يلي:

$(document).ready(function () {
        $('.myOptionCheckbox').change(function () {            
            if ($(this).prop('checked') == true) {
                console.log("checked");           
            }
            else {
                console.log("unchecked");                
            }
        });
    });

إنه يعمل بشكل جيد مع checkboxes و radioboxes أيضًا.

1
Developer

هذه الوظيفة بديلة ومستقرة:

$('#isAgeSelected').context.checked
(return True/False)

مثال:

if($('#isAgeSelected').context.checked){ //if Checkbox is checked then bla bla..
    /*.....*/
}else{
    /*.....*/
}
1
Ferhat KOÇER
if($('#isAgeSelected').prop('checked')) {
    // do your action 
}
0
Vikash

يرجى المحاولة أدناه رمز للتحقق تم تحديد خانة الاختيار أم لا

$(document).ready(function(){

$("#isAgeSelected").on('change',function(){

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

});

})؛

0
Javed Khan