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




html dom (24)

शीर्ष जवाब ने मेरे लिए यह नहीं किया। हालांकि यह किया गया था:

<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 तत्व में फीका है, और यदि ffact तत्व को fadeOut नहीं है।

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

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

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

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

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


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

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

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


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

उपयोग:

<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 के एक अद्यतन संस्करण का उपयोग कर रहे हैं, तो आपको अपनी समस्या को हल करने के लिए .prop विधि के लिए जाना होगा:

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

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

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


मैं एक ही मुद्दे पर भाग गया। मेरे पास एक एएसपी.नेट चेकबॉक्स है

<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 { ... }

मैं आशान्वित हूं कि इससे आपको सहायता मिलेगी।


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

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

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

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

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


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

/* isAgeSelected being id for checkbox */

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

मुझे विश्वास है कि आप यह कर सकते हैं:

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

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

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

चेकबॉक्स डीओएम तत्व की चेक की 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 का उपयोग करें is() फ़ंक्शन:

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

jQuery 1.6+

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

jQuery 1.5 और नीचे

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

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

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

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


मैंने 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';

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


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

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

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


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

या

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

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

$(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 ( $("#checkbox:checked").length ) {       
    alert("checkbox is checked");
} else {
    alert("checkbox is not checked");
}

यद्यपि आपने अपनी समस्या के लिए जावास्क्रिप्ट समाधान का प्रस्ताव दिया है ( checkbox textbox प्रदर्शित करना), इस समस्या को केवल सीएसएस द्वारा हल किया जा सकता है। इस दृष्टिकोण के साथ, आपका फॉर्म उन उपयोगकर्ताओं के लिए काम करता है जिन्होंने जावास्क्रिप्ट को अक्षम कर दिया है।

मान लें कि आपके पास निम्न HTML है:

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

अन्य परिदृश्यों के लिए, आप उपयुक्त सीएसएस चयनकर्ताओं के बारे में सोच सकते हैं।

इस दृष्टिकोण को प्रदर्शित करने के लिए यहां एक पहेली है


यह जांचने के कई तरीके हैं कि चेकबॉक्स चेक किया गया है या नहीं:

JQuery का उपयोग करने के लिए रास्ता

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

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


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"

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

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

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

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

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







checkbox