ایجاد چک باکس با استفاده از jquery

[الهام قدوسی]

سلام من یه چک باکسی رو دارم تنظیم میکنم (شکل پایین صفحه) که از چک باکس و دو نوع کلاس برای تغییر رنگ و فونت همانند شکل بکار بردم حالا میخوام وقتی کلیک شد یا چک باکس تیک خورد به رنگ سبز در بیاد و زمانی که تیک برداشته شد برگرده رنگ قبلیش . اگه با fucosin , fucosout بنویسم کد رو رنگ سبز به محض اینکه
جای دیگه کلیک کنم برداشته میشه که من این رو نمیخوام .... میخوام تا زمانی که تیک داره چک باکس رنگ سبز بمونه به نظرتون چجوری بنویسم کدش رو؟؟
اینم کد css و کد jquery و شکل112587

.InptDatarqst {
width: 300px;
height: 213px;
border: solid thin #c9c6c6;
float: left;
padding: 3px 0px 0 0;
overflow-y:auto ;
overflow-x: hidden;
margin-top: 37px;
}

.Chbox {
width: 287px;
height: 25px;
margin-bottom: -1px;
padding: 6px 5px 5px 0;
color: #6a6a6a;
border: solid thin #c9c6c6;
background: #fff;
}
.Chbox1 {
width: 287px;
height: 25px;
margin-bottom: -1px;
padding: 6px 5px 5px 0;
color: #000;
border: solid thin #c9c6c6;
background: #e3e1e1;
}

/*.Chbox:hover {
background: #e3e1e1;
}*/
/*.Chbox:active {
background: #74a707;
}*/
p {
margin-top: 0px;
color: #6a6a6a;
font-family: 'tahoma';
font-size: small;
}

<script>
$(document).ready(function () {
$(".Chbox").click(function () {
$(this).css({ "background": "#74a707", "color": "#fff" });
});
$(".Chbox1").click(function() {
$(this).css({ "background": "#74a707", "color": "#fff" });
});
//$(".Chbox").focusout(function () {
// $(this).css({ "background": "#fff" });
//});
});
</script>

[مهدی رحیم زاده]

با سلام و احترام
شما باید وضعیت تیک خوردن چک باکس های کلاس مورد نظر رو بررسی کنید و هر کدوم که تیک خورده بود رو رنگی کنید با این کد :

$(".checkbox").change(function () {
if ($(this).checked) {
//green color
} else {
//with color
}
});

در نقاط توضیحات باید کدهای مربوط به تغییر رنگ رو بنویسید
موفق و پیروز باشید

[الهام قدوسی]

با سلام و احترام
شما باید وضعیت تیک خوردن چک باکس های کلاس مورد نظر رو بررسی کنید و هر کدوم که تیک خورده بود رو رنگی کنید با این کد :

$(".checkbox").change(function () {
if ($(this).checked) {
//green color
} else {
//with color
}
});

در نقاط توضیحات باید کدهای مربوط به تغییر رنگ رو بنویسید
موفق و پیروز باشید
من کدهای داخل صفحه اصلی رو به این صورت نوشتم

<div class="Chbox1">
<input id="RqstPrdct1" type="checkbox" title="" value="" />
</br>
</div>
<div class="Chbox">
<input id="RqstPrdct2" type="checkbox" title="" value="" />
</br>
</div>
و این هم کد JQUERY
تنظیم نشد :ناراحت:
$(".Chbox").change(function () {
if (this.checked) {
$(this).css({ "background": "#74a707", "color": "#fff" });
//green color
} else {
//with color
}
});
$(".Chbox1").change(function () {
if (this.checked) {
$(this).css({ "background": "#74a707", "color": "#fff" });
//green color
} else {
//with color
}
});

[مهدی رحیم زاده]

با سلام
کد بنده اصلاح شده
if (this.checked) این کد رو لطفا توجه کنید بهش
موفق و پیروز باشید

[saeidpsl]

اینم میشه


$(document).ready(function() {


$(".Chbox").change(function () {

if ($("#RqstPrdct1").is(':checked')) {
$(this).css({ "background": "#74a707", "color": "#fff" });
}else{
$(this).css({ "background": "", "color": "#fff" });
}

});



$(".Chbox1").change(function () {

if ($("#RqstPrdct2").is(':checked')) {
$(this).css({ "background": "#74a707", "color": "#fff" });
}else{
$(this).css({ "background": "", "color": "#fff" });
}

});


});

[الهام قدوسی]

اینم میشه


$(document).ready(function() {


$(".Chbox").change(function () {

if ($("#RqstPrdct1").is(':checked')) {
$(this).css({ "background": "#74a707", "color": "#fff" });
}else{
$(this).css({ "background": "", "color": "#fff" });
}

});



$(".Chbox1").change(function () {

if ($("#RqstPrdct2").is(':checked')) {
$(this).css({ "background": "#74a707", "color": "#fff" });
}else{
$(this).css({ "background": "", "color": "#fff" });
}

});


});


سلام ممنون از جوابتون این هم به نتیجه نرسید :|

[الهام قدوسی]

با سلام
کد بنده اصلاح شده
if (this.checked) این کد رو لطفا توجه کنید بهش
موفق و پیروز باشید
فکر میکنم اشکال از این هست که من یه کلاسی رو تعریف کردم و داخلش chekbox گذاشتم باید خود chekbox رو تنظیم میکردم که تو فرخوانی مشکل پیش نیاد البته هنوز مطمئن نیستم ایراد از این باشه.

[jalil_gh]

میتونید به این صورت بنویسید.
$(".Chbox").click(function (e) {

if ($(e.target).is("input")) { // if check box is clicked

if (e.target.checked) {
$(this).css({ "background": "#74a707", "color": "#fff" });
} else {
$(this).css({ "background": "#E3E1E1", "color": "#000" });
}

} else { // if div is clicked
var $check = $(this).find('input');

if ( !$check.prop('checked') ) {
$(this).css({ "background": "#74a707", "color": "#fff" });
$check.prop('checked', true);
} else {
$(this).css({ "background": "#E3E1E1", "color": "#000" });
$check.prop('checked', false);
}
}

});

ویرایش: البته من توصیه می‌کنم به جای اینکه رنگ‌ها رو مستقیما با متد css تغییر بدید یه کلاس تعریف کنید به اسم checked. و رنگ ها رو براش تنظیم کنید. بعدش از متدهای addClass و removeClass استفاده کنید. اینطوری دیگه برنامه‌نویسی با طراحی قاطی نمی‌شه.

[الهام قدوسی]

چون مربوط به همین چک باکس بود دوباره مطرح نکردم جای دیگه. میخوام بتونم چک کنم تیک خورده های چک بکس رو همه اطلاعات رو در یه فیلد پشت سر هم نشون بدم تو sql یعنی اگه چک باکس من به ترتیب
1
2
3
بود به این صورت 123 ذخیره بشه میدونم باید در یه ارایه ابتدا ذخیره کنم بعدش با ajax بفرستم میشه راهنمایی کنین کدش چجوری هست؟
یه سوال دیگه میخوام عکس هایی رو مثلا برای یه سایت خبری از sql بگیرم اینجوری که عکس ها جایی رو سرور یا جای دیگه اپلود شن بعدش لینک عکس ها یا ادرسشون در فیلدی نگه داشته بشه برای این کار باید چی کار کنم ؟ همچنین برای پیوند ادرس عکس یا خبر چه کنم؟