চেকবক্সটি চেক করা থাকলে লেবেল হাইলাইট করুন


110

সংশ্লিষ্ট চেকবক্সটি চেক করা হলে সেখানে কোনও লেবেলের রঙ পরিবর্তন করার জন্য অ জাভাস্ক্রিপ্টের কোনও উপায় আছে?


উত্তর:


147

যদি তোমার থাকে

<div>
  <input type="checkbox" class="check-with-label" id="idinput" />
  <label class="label-for-check" for="idinput">My Label</label>
</div>

আপনি করতে পারেন

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}

এই কাজ দেখুন । নোট করুন যে এটি অ-আধুনিক ব্রাউজারগুলিতে কাজ করবে না।


2
এটি আইপি 6-8 এ কাজ করবে না, যদি না ওপি আইই সম্পর্কে চিন্তা না করে।
হুসেন

25
আমি জানি, আমি উল্লেখ করেছি যে এটি কেবল আমার উত্তরে আধুনিক ব্রাউজারগুলিতে কাজ করবে।
অ্যান্ড্রু মার্শাল

4
@ inf3rno এটি করা উচিত। সংলগ্ন ভাইবোন নির্বাচক এবং :checkedনির্বাচক উভয়ই IE9 তে সমর্থিত হিসাবে তালিকাভুক্ত। মাইক্রোসফ্টরের নিজস্ব ডক্স এটি নিশ্চিত করে।
অ্যান্ড্রু মার্শাল

3
ভাল সমাধান, তবে যদি লেবেল উপাদানটি পরের পূর্বপুরুষ না হয় তবে আপনার + নির্বাচক 456bereastreet.com/archive/200601/css_3_selectors_exPLised (টেবিলের শেষ) এর পরিবর্তে ~ নির্বাচক ব্যবহার করার চেষ্টা করা উচিত
কার্ল অ্যাডলার

@ অ্যাবাইম্লেক্স যদিও আপনার এইচটিএমএল এর উপর নির্ভর করে <label>যা কাঙ্ক্ষিতের চেয়ে অনেক বেশি মেলানো শেষ করতে পারে ।
অ্যান্ড্রু মার্শাল

101

আমি অ্যান্ড্রুয়ের পরামর্শটি পছন্দ করি এবং আসলে সিএসএসের নিয়মটি হওয়া দরকার:

:checked + label {
   font-weight: bold;
}

আমি labelএবং inputউপাদানটির অন্তর্নিহিত সংযুক্তির উপর নির্ভর করতে চাই, তাই আমি এরকম কিছু করব:

<label>
   <input type="checkbox"/>
   <span>Bah</span>
</label>

সিএসএস সহ:

:checked + span {
    font-weight: bold;
}

উদাহরণ: http://jsfiddle.net/wrumsby/vyP7c/


একটি চেক করা চেকবাক্সের প্যারেন্ট লেবেলের পটভূমি রঙ পরিবর্তন করার একটি কৌশল আছে । ট্যাগ ওভারফ্লো করুন: লুকানো, তারপর চেকবক্সটি দিতে একটি খুব বড় dropshadow ... :checked { box-shadow: 0 0 0 500px orange; }। যে কোনও ভাইবোন উপাদান লুকিয়ে নেই তা নিশ্চিত করতে আপনাকে জেড-ইনডেক্সের সাথে খেলতে হবে।
অ্যারোন কিকালি

8

:checkedফর্মগুলি আরও অ্যাক্সেসযোগ্য করার জন্য এটি ছদ্ম-শ্রেণীর ব্যবহারের একটি উদাহরণ । :checkedসিউডো-বর্গ যেমন ইমেজ গ্যালারী যেমন ইন্টারেক্টিভ উইজেট, গড়ে তুলতে গোপন ইনপুট এবং তাদের প্রোফাইল লেবেল সহ ব্যবহার করা যাবে। আমি লোকদের জন্য স্নিপড তৈরি করেছি যা পরীক্ষা করতে চায়।

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #f00;
  font-style: normal;
} 
<input type="checkbox" id="cb_name" name="cb_name"> 
<label for="cb_name">CSS is Awesome</label> 


-24

আপনি একা সিএসএস দিয়ে এটি করতে পারবেন না। আপনি করতে পারেন jQuery ব্যবহার করে

এইচটিএমএল

<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />

সিএসএস

.highlight{
    background:yellow;
}

jQuery এর

$('#check').click(function(){
    $('#lab').toggleClass('highlight')
})

এটি সমস্ত ব্রাউজারে কাজ করবে

Http://jsfiddle.net/LgADZ/ এ কাজের উদাহরণ পরীক্ষা করুন


8
প্রশ্নটি জাভাস্ক্রিপ্টহীন উপায় বলেছে এবং আপনি ক্লিয়ার করার আগে উত্তরটি এমন একটি উপায় দেখিয়েছে যা কেবল CSS ব্যবহার করে কাজ করে
কেভিন

2
গৃহীত সমাধানটি সংলগ্ন ভাইবোন নির্বাচক ব্যবহার করে যা আসলে সিএসএস ২.১ এর বৈশিষ্ট্য ।
ওয়াল্টার রুমসবি

JQuery হ'ল একমাত্র সমাধান যা ক্রস ব্রাউজার সমর্থন নিশ্চিত করবে।
হুসেন

7
হুসেনকে দয়া করে সাবধান করুন। আপনি ইন্টারনেট এক্সপ্লোরার 6 এর মতো ব্রাউজারগুলির জন্য সমর্থন সরবরাহ করতে পারেন যা জাভাস্ক্রিপ্ট ব্যবহার করে সংলগ্ন ভাইবাল নির্বাচককে সমর্থন করে না । jQuery একটি জাভাস্ক্রিপ্ট লাইব্রেরি যা আপনাকে এটি করতে সহায়তা করবে; অন্যান্য লাইব্রেরি রয়েছে (বা খাঁটি জাভাস্ক্রিপ্ট!) যা দিয়ে আপনি এটি করতে পারেন।
সাইমন লাইশচে

পুনঃ আমার পূর্ববর্তী মন্তব্য, আমি বুঝতে পারি নি যে :checkedছদ্ম নির্বাচকটি CSS3 বৈশিষ্ট্য।
ওয়াল্টার রুমসবি
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.