"> برسی jQuery CheckBox و Radio button | ام اس پی سافت

برسی jQuery CheckBox و Radio button

jQuery CheckBox

jQuery CheckBox و Radio Button از کنترل های پرکاربردی هستند که در فرم های HTML به کرات استفاده می شوند. در این مقاله نشان می دهیم که چگونه با استفاده از جی کوئری می توان بسیاری از عملیات های رایج مربوط به این کنترل ها را انجام داد.

اگر شما نیز با فرم های HTML کار کرده باشید به احتمال زیاد از CheckBox و Radio Button در صفحه خود استفاده کرده اید.

پس همراه ما باشید:

  1. بررسی وضعیت checkbox و تغییر حالت آن با کدنویسی

برای بررسی وضعیت checkbox از متد .is() استفاده می کنیم:

$("#cb2").is(":checked");

 

برای تنظیم checkbox در حالت تیک خورده از متد زیر استفاده می کنیم:

$('#cb2').prop('checked', true);

 

در این جا از متد prop() استفاده کردیم تا به طور مستقیم ویژگی checked مربوط به checkbox را تنظیم کنیم، در این   مثال این کار را برای checkbox ای با id=cb2 انجام دادیم.

همان طور که احتمالا حدس زدید، برای برداشتن تیک از:

$('#cb2').prop('checked', false);

 

استفاده می کنیم.

به همین ترتیب می توانیم ویژگی checked  مربوط به Radio Button را نیز تغییر دهیم.

  1. بازیابی مقدار انتخاب شده یک Radio Button

برای بازیابی مقدار انتخاب شده یک Radio Button به شکل زیر عمل می کنیم:

$("input:radio").click(function () {

$("#selRadio").text($(this).val());

})

 

selRadio یک المنت پاراگراف است که مقدار val() خصوصیت متن آن را به عنوان Radio Button انتخاب شده تنظیم می کنیم.

[divider style=”normal” top=”20″ bottom=”20″]

پیشنهاد میکنم : دسترسی به مقادیر CheckBoxList سمت کلاینت با استفاده از jQuery

[divider style=”normal” top=”20″ bottom=”20″]

 

و اما اگر از اینکه به جای .on(‘click’,..) از .click() استفاده کردیم، تعجب کرده اید باید یاد آوری کنیم که click() فرم کوتاده شده و به نوعی shortcut برای .on(“click”,handler) می باشد.

  1. بازیابی گزینه انتخاب شده در یک RadioButtonGroup

RadioButton ها معمولا به صورت گروهی استفاده می شوند. یک فایل HTML جدید با نام “InputMiscFunctions.html” ایجاد کرده و Markup زیر را در آن می نویسیم:

 

<body>

<input type="radio" name="group1" value="Milk" /> Milk<br />

<input type="radio" name="group1" value="Butter" /> Butter<br />

<input type="radio" name="group1" value="Cheese" /> Cheese<br />

<p id="status" />

</body>

 

برای اینکه این RadioButtonها به صورت یک گروه دربیایند، همانطور که مشاهده می کنید همه آنها نام یکسانی دارند. برای بازیابی گزینه انتخاب شده در RadioButtonGroup به صورت زیر عمل می کنیم:

 

$(function () {

var rGrp = $("input[name=group1]");

rGrp.click(function () {

var checkedRadio = rGrp.filter(":checked");

$("#status").text(checkedRadio.val());

});

});

 

برای دریافت مقدار انتخاب شده Radio Button در یک گروه، ابتدا باید به همه المنت های radio در گروه دسترسی داشته باشیم. این کار با rGrp=$(“input[name=group1]”) انجام می شود.

زمانی که کاربر روی یکی از radio button ها کلیک می کند، با استفاده از rGrp.filter(“:checked”) متوجه می شویم که کدام یک از آن ها انتخاب شده است و سپس صفت value آن شی را با استفاده از val() می گیریم و در یک پاراگراف نمایش می دهیم.

اگر برنامه را اجرا کنید، خروجی به شکل زیر خواهد بود:

  1. بازیابی و نمایش تمام مقادیر انتخاب شده در CheckBox

فرض کنید شما می خواهید تمام مقادیر انتخاب شده در checkbox را در یک پاراگراف نمایش دهید و همچنین اگر کاربر مقادیری را از حالت انتخاب درآورد، متن پاراگراف به روزرسانی شود. یک فایل HTML جدید با نام “InputMiscFunctions.html” ایجاد کرده و Markup زیر را در آن می نویسیم:

<body>

<p id="checkBoxes">

<input type="checkbox" id="cb1" value="1"/>

<label for="Checkbox1">Option One</label>

<br />

<input type="checkbox" id="cb2" value="2" />

<label for="Checkbox2">Option Two</label>

<br />

<input type="checkbox" id="cb3" value="3" />

<label for="Checkbox3">Option Three</label>

<br />

<input type="checkbox" id="cb4" value="4" />

<label for="Checkbox4">Option Four</label>

<br />

</p>

<p id="status"/>

</body>

 

توجه کنید که دقیقا بعد از هر checkbox یک lable قرار داده شده است. در این جا ما مقدار lable ها را خواهیم خواند. برای نمایش مقدار checkboxهای انتخاب شده از کد زیر استفاده می کنیم:

 

$(function () {

var cb = $("#checkBoxes input[type='checkbox']");

cb.on('click', function () {

var selected = [];

cb.each(function () {

if (this.checked) {

selected.push($(this).next().text());

}

});

$("#status").text(selected.join(','));

});

});

 

انتخاب گر $(“#checkBoxes input[type=’checkbox’]”) ما را به checkbox های درون پاراگراف محدود می کند. هر زمان که یک checkbox کلیک شود، با استفاده از each() یک حلقه روی همه checkboxها اجرا می شود و برای checkbox ای که کلیک شده است، متن lable آن به آرایه Selected اضافه می شود. از آنجا که این Checkbox جاری را نمایش می دهد و lable آن درست بعد از آن قرار گرفته است، از $(this).next().text() برای خواندن مقدار آن استفاده می کنیم. Join() یک تابع Array.join می باشد که با گذاشتن یک کاما بین المنت ها آرایه Selected را به String تبدیل می کند. نتیجه این متد به متد text() مربوط به پاراگراف status تخصیص داده می شود.

فایل “InputMiscFunctions.html” را ذخیره کرده و آن را در مروگر نمایش می دهیم. روی checkboxها کلیک می کنیم و مقادیر همه آن ها در پاراگراف نمایش داده می شود.

  1. تبدیل یک Radio Button به checkbox

برای تبدیل یک Radio Button به checkbox از porp() استفاده می کنیم:

$("#btnConvert").on('click', function () {

$('input:radio').prop('type', 'checkbox');

});

 

در کلیک دکمه، ما از prop استفاده کردیم تا خصوصیت type مربوط به radio button را از radio به button تغییر دهیم. اگر این سوال برای شما پیش آمده که چرا به جای attr() از prop() استفاده کردیم، باید بدانید که هرزمان بخواهیم مقدار پیش فرض یک تگ HTML را مشخص کنیم، از attr() استفاده می کنیم اما اگر بخواهیم property ها را در  پنجره مخصوص به آن یا اشیای داکیومنت تغییر دهیم، باید از prop() استفاده کنیم.

  • پسورد: www.mspsoft.com
مسعود شریفی پور

از سال 88 که با برنامه نویسی آشنا شدم خیلی علاقه مند بودم یک بستر آموزشی بسازم در فضای وب و به انتشار آموزش های در این زمینه بپردازم.حالا یک تیم داریم و با قدرت رو به جلو حرکت میکنیم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

کدیشن ! مارکت پروژه های برنامه نویسی راه اندازی شدیه توکه پا بریم ببینم