कैसे जांचें कि jQuery में चेकबॉक्स चेक किया गया है या नहीं?




html dom (20)

मुझे चेकबॉक्स checked चेक की checked संपत्ति की जांच करने और jQuery का उपयोग करके चेक की गई संपत्ति के आधार पर एक क्रिया करने की आवश्यकता है।

उदाहरण के लिए, यदि आयु चेकबॉक्स चेक किया गया है, तो मुझे आयु दर्ज करने के लिए टेक्स्टबॉक्स दिखाना होगा, अन्यथा टेक्स्टबॉक्स छुपाएं।

लेकिन निम्न कोड डिफ़ॉल्ट रूप से false लौटाता है:

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

मैं checked की checked संपत्ति को सफलतापूर्वक कैसे पूछूं?


मैं चेक की गई संपत्ति को सफलतापूर्वक कैसे पूछूं?

चेकबॉक्स डीओएम तत्व की चेक की 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>


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

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
}

आप इस कोड का उपयोग कर सकते हैं:

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

इसे इस्तेमाल करो:

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

यदि चेकबॉक्स चेक किया गया है तो लंबाई शून्य से अधिक है।


उपयोग:

<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


चेकबॉक्स प्रॉपर्टी के लिए Click इवेंट हैंडलर का उपयोग अविश्वसनीय है, क्योंकि checked की गई घटना ईवेंट हैंडलर के निष्पादन के दौरान बदल सकती है!

आदर्श रूप से, आप अपने कोड को एक change ईवेंट हैंडलर में रखना चाहते हैं जैसे कि चेक बॉक्स के मूल्य को हर बार निकाल दिया जाता है (यह कैसे किया जाता है इससे स्वतंत्र)।

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

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

टॉगल करें: 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');
    };
});

मैं इसका उपयोग कर रहा हूं और यह बिल्कुल ठीक काम कर रहा है:

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

नोट: यदि चेकबॉक्स चेक किया गया है तो यह सत्य वापस लौटाएगा अन्यथा अपरिभाषित, इसलिए "सत्य" मान के लिए बेहतर जांच करें।


मैं इसका उपयोग कर रहा हूं:

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

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

मैंने 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 संपत्ति को उचित रूप से सेट करता है। उस उदाहरण में टर्नरी ऑपरेटर का उपयोग कर।

परीक्षण करने के लिए यहां एक fiddle है।

परिशिष्ट

यदि क्रॉस-ब्राउज़र संगतता कोई समस्या है तो मैं सीएसएस display प्रॉपर्टी को किसी भी और इनलाइन पर सेट करने का प्रस्ताव नहीं करता हूं।

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

धीमी लेकिन क्रॉस-ब्राउज़र संगत।


यदि आप jquery के एक अद्यतन संस्करण का उपयोग कर रहे हैं, तो आपको अपनी समस्या को हल करने के लिए .prop विधि के लिए जाना होगा:

$('#isAgeSelected').prop('checked') जाएगा यदि अनचेक किया गया तो चेक और false । मैंने इसकी पुष्टि की और मैं पहले इस मुद्दे पर आया था। $('#isAgeSelected').attr('checked') और $('#isAgeSelected').is('checked') undefined लौटा रहा है जो स्थिति के लिए योग्य उत्तर नहीं है। तो नीचे दिए गए अनुसार करें।

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

उम्मीद है कि यह मदद करता है:) - धन्यवाद।


यह उदाहरण बटन के लिए है।

निम्नलिखित आज़माएं:

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

उदाहरण या दस्तावेज़ भी देखें:


यह मेरे लिए काम किया:

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

जहां से isAgeSelected गया है नियंत्रण की आईडी है।

इसके अलावा, @ karim79 का answer ठीक काम करता है। मुझे यकीन नहीं है कि जब मैंने इसका परीक्षण किया था तब मुझे क्या याद आया।

नोट, यह उत्तर माइक्रोसॉफ्ट अजाक्स का उपयोग करता है, jQuery नहीं


यह वही काम करने के लिए कुछ अलग तरीका है:

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


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"

jQuery 1.6+

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

jQuery 1.5 और नीचे

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

JQuery का कोई संस्करण

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

सभी क्रेडिट Xian जाता है।


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

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

यदि इनपुट चेक किया गया है और false नहीं है तो यह true हो जाता है।





checkbox