সুনির্দিষ্ট বৈশিষ্ট্য সেট রয়েছে এমন উপাদানগুলির জন্য কীভাবে অনুসন্ধানকারীর সমস্ত ব্যবহার করবেন?

Question

আমি document.querySelectorAllসমস্ত চেকবাক্সগুলির জন্য ব্যবহার করার চেষ্টা করছি যা valueবৈশিষ্ট্য সেট রয়েছে।

পৃষ্ঠায় অন্যান্য চেকবক্স রয়েছে যা valueসেট নেই এবং প্রতিটি চেকবাক্সের জন্য মান আলাদা। আইডিস এবং নামগুলি যদিও অনন্য নয়।

উদাহরণ: <input type="checkbox" id="c2" name="c2" value="DE039230952"/>

মানগুলি সেট করা আছে কেবলমাত্র সেই চেকবক্সগুলি কীভাবে নির্বাচন করব?

Comments

এর মধ্যে কি ফাঁকা অংশ রয়েছে? পছন্দvalues=""

— জোসেফ

অন্যান্য চেকবক্সগুলির কোনও মূল্য নেই তাই এটির সাথে এটি অন্তর্ভুক্ত করতে হবে না।

— সোরেন

Answer 1

আপনি এটির querySelectorAll()মতো ব্যবহার করতে পারেন :

var test = document.querySelectorAll('input[value][type="checkbox"]:not([value=""])');

এটি অনুবাদ করে:

"মান" বৈশিষ্ট্যের সাথে সমস্ত ইনপুট পান এবং "মান" গুণটি ফাঁকা নয় has

এই ডেমোতে , এটি শূন্য নয় এমন মান সহ চেকবক্সটি অক্ষম করে।

Comments

কিভাবে শুধুমাত্র চেকবক্স টাইপ ইনপুট নির্বাচন করবেন? অনেকগুলি ইনপুট ট্যাগ রয়েছে যার মান বৈশিষ্ট্য রয়েছে তবে আমি কেবল চেকবক্সই চাই।

— সোরেন

যোগ @Soryn [type="checkbox"]। আমার উত্তর আপডেট।

— জোসেফ

জবাব দিন! এটি ডোম ট্র্যাভারসালের জন্য মিনি লাইব্রেরিতে jQuery অন্তর্ভুক্ত করার প্রয়োজনীয়তাটি মূলত সরিয়ে দেয়। আমি নীচে একটি উত্তরে কিছু অতিরিক্ত টিপস পেয়েছি।

— ম্যাটডলকায়ার

আপনি কি আমাকে বলতে পারেন যে এই সিনট্যাক্স ইনপুটটি কী [মান] [টাইপ = "চেকবক্স"]: না ([মান = ""] আমি জাভাস্ক্রিপ্টে এই সিনট্যাক্সের আগে আগে দেখতে

— পাইনি

@ ব্ল্যাকহাক সিনট্যাক্সে সিএসএস নির্বাচক ব্যবহার করা হয়েছে। এমডিএন দ্বারা নির্দিষ্ট হিসাবে এটি "একটি স্ট্রিং যা এক বা একাধিক সিএসএস নির্বাচককে কমা দ্বারা পৃথক করা থাকে"। আপনি সিএসএস নির্বাচনকারীদের সম্পর্কে এখানে পড়তে পারেন ।

— মার্টিভা

Answer 2

অতিরিক্ত টিপস:

একাধিক "নোট", ইনপুট যা লুকানো নয় এবং অক্ষম নয়:

:not([type="hidden"]):not([disabled])

আপনি কি জানেন যে আপনি এটি করতে পারেন:

node.parentNode.querySelectorAll('div');

এটি jQuery এর ন্যায়সঙ্গত:

$(node).parent().find('div');

যা কার্যকরভাবে "নোড" এবং নীচে পুনরাবৃত্তভাবে সমস্ত ডিভগুলি খুঁজে পাবে, হট ড্যাম!

Answer 3

আপনার উদাহরণ সহ:

<input type="checkbox" id="c2" name="c2" value="DE039230952"/>

ডকুমেন্টের সাথে $$ প্রতিস্থাপন করুন.উক্ত উদাহরণগুলিতে নির্বাচনকারী সমস্ত নির্বাচন করুন:

$$('input') //Every input
$$('[id]') //Every element with id
$$('[id="c2"]') //Every element with id="c2"
$$('input,[id]') //Every input + every element with id
$$('input[id]') //Every input including id
$$('input[id="c2"]') //Every input including id="c2"
$$('input#c2') //Every input including id="c2" (same as above)
$$('input#c2[value="DE039230952"]') //Every input including id="c2" and value="DE039230952"
$$('input#c2[value^="DE039"]') //Every input including id="c2" and value has content starting with DE039
$$('input#c2[value$="0952"]') //Every input including id="c2" and value has content ending with 0952
$$('input#c2[value*="39230"]') //Every input including id="c2" and value has content including 39230

উদাহরণগুলি সরাসরি এর সাথে ব্যবহার করুন:

const $$ = document.querySelectorAll.bind(document);

কিছু সংযোজন:

$$(.) //The same as $([class])
$$(div > input) //div is parent tag to input
document.querySelector() //equals to $$()[0] or $()