ฉันจะตรวจสอบว่ามีการทำเครื่องหมายในช่องทำเครื่องหมายเป็น 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 is ()ฟังก์ชั่น:

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

หมายเหตุ: หากมีการทำเครื่องหมายที่ช่องทำเครื่องหมายมันจะคืนค่าเป็นจริงมิฉะนั้นจะไม่ได้กำหนดดังนั้นควรตรวจสอบค่า "TRUE" ให้ดีขึ้น

ใช้:

<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เป็น ID ของตัวควบคุม

นอกจากนี้คำตอบของ @ 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คุณสมบัติของฟิลด์ข้อความอายุอย่างเหมาะสม ในตัวอย่างนั้นใช้ผู้ประกอบการที่สาม

นี่คือซอเพื่อให้คุณทดสอบ

ภาคผนวก

ถ้าเข้ากันได้ข้ามเบราว์เซอร์เป็นปัญหาแล้วผมเสนอให้ตั้งแบบ CSS 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" />

ในรหัส jQuery ฉันใช้ตัวเลือกต่อไปนี้เพื่อตรวจสอบว่าช่องทำเครื่องหมายถูกทำเครื่องหมายหรือไม่และดูเหมือนว่าจะทำงานเหมือนมีเสน่ห์

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

ฉันแน่ใจว่าคุณสามารถใช้ ID แทน 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')ฟังก์ชัน หากเป็นเช่นนั้นจะจางลงในองค์ประกอบ #saveForm และหากไม่ได้จางออกไปยังองค์ประกอบ 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 ที่เหมาะสม

นี่คือซอที่จะแสดงให้เห็นถึงวิธีการนี

สลับ: 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();
    }                                          
});