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 ගේ () ශ්‍රිතය භාවිතා කරන්න :

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

සටහන: පිරික්සුම් කොටුව සලකුණු කර ඇත්නම් එය වෙනත් ආකාරයකින් නිර්වචනය නොකෙරේ, එබැවින් "සත්‍ය" අගය සඳහා වඩා හොඳ පරීක්ෂා කරන්න.

භාවිත:

<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පාලනයේ හැඳුනුම්පත කොහිද?

එසේම, @ karim79 හි පිළිතුර හොඳින් ක්‍රියාත්මක වේ. මම එය පරීක්‍ෂා කරන අවස්ථාවේ මග හැරුණු දේ මට විශ්වාස නැත.

සටහන, මෙය පිළිතුර භාවිතා කරන්නේ මයික්‍රොසොෆ්ට් අජැක්ස් මිස 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 { ... }

මට විශ්වාසයි ඔබට 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 මූලද්‍රව්‍යය තුළ fadeIn කරන්න, නැතිනම් fadeOut නම් saveForm මූලද්‍රව්‍යය.

මම මෙය භාවිතා කරමි:

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

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

ඔබ (අ ප්රදර්ශනය ඔබේ ප්රශ්නය සඳහා ජාවාස්ක්රිප්ට් විසඳුමක් යෝජනා ඇතත් textboxකරන විට checkboxය checked), මෙම ගැටලුව විසඳා ගත හැකි හුදෙක් CSS විසින් . මෙම ප්‍රවේශය සමඟ, ඔබගේ පෝරමය ජාවාස්ක්‍රිප්ට් අක්‍රීය කළ පරිශීලකයින් සඳහා ක්‍රියා කරයි.

ඔබට පහත 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();
    }                                          
});