জাভাস্ক্রিপ্ট সহ একটি রেডিও বোতাম চেক করুন


98

কিছু কারণে, আমি এটি খুঁজে বের করতে পারে বলে মনে হয় না।

আমার এইচটিএমএলে কিছু রেডিও বোতাম রয়েছে যা বিভাগগুলিকে টোগল করে:

<input type="radio" name="main-categories" id="_1234" value="1234" /> // All
<input type="radio" name="main-categories" id="_2345" value="2345" /> // Certain category
<input type="radio" name="main-categories" id="_3456" value="3456" /> // Certain category
<input type="radio" name="main-categories" id="_4567" value="4567" /> // Certain category

ব্যবহারকারী 1234যাকে চান সে নির্বাচন করতে পারে তবে যখন কোনও নির্দিষ্ট ইভেন্ট ট্রিগার হয় তখন আমি চেক করা রেডিও বোতামটি সেট করতে চাই , কারণ এটি ডিফল্ট চেক করা রেডিও বোতাম।

আমি এর সংস্করণ চেষ্টা করেছি (jQuery সহ এবং ছাড়াই):

document.getElementById('#_1234').checked = true;

তবে এটি আপডেট হবে বলে মনে হচ্ছে না। দৃশ্যমানভাবে আপডেট করার জন্য আমার এটি দরকার যাতে ব্যবহারকারী এটি দেখতে পারে। কেউ সাহায্য করতে পারেন?

সম্পাদনা: আমি কেবল ক্লান্ত হয়ে পড়েছি এবং #এটিকে উপেক্ষা করার জন্য ধন্যবাদ, এটি এবং $.prop()


এই Stackoverflow প্রশ্ন চেক করুন: [কীভাবে jQuery সঙ্গে একটি রেডিও বোতাম চেক করতে] [1] [1]: stackoverflow.com/questions/5665915/...
ম্যান্ডি Schoep

8
এ পরিবর্তন করুনdocument.getElementById('_1234').checked = true;
stackErr

4
@ স্ট্যাকআর ছাড়াই#
টিম

দুঃখিত, কেবল একটি ভুল অনুলিপি-পেস্ট করুন। এখন আপডেট হয়েছে। @ ফিলিপেকেএম তারপরে দয়া করে আমাকে সাহায্য করুন, এমন কোনও খুঁজে পেলাম না যে সাহায্য করে।
পিটিএফ

@ কেজেলেলক আমার মন্তব্যটি দেখুন বা পয়েন্টস উত্তর
stackErr

উত্তর:


159

#স্থানীয় জেএসএসের সাথে সিএসএস / জ্যাকুয়ের সিনট্যাক্স ( সনাক্তকারী হিসাবে) মিশ্রণ করবেন না ।

নেটিভ জেএস সমাধান:

document.getElementById("_1234").checked = true;

JQuery সমাধান:

$("#_1234").prop("checked", true);


4
প্রযুক্তিগতভাবে এটি সিএসএস নির্বাচক সিনট্যাক্স। jQuery স্রেফ ধার নিয়েছে এবং এটি বাড়িয়েছে
টিম সেগুইন

jQuery এটি পেয়েছিলাম querySelectorআমি কল্পনা করব।
অ্যান্ডি

অনেক বেশী ভালো.attr("checked", "checked")
ma77c

@ অ্যান্ডি - সিজল 2006 এর শুরু থেকে jQuery এ ব্যবহৃত হয়েছিল। ( en.wikedia.org/wiki/JQuery# ইতিহাস )। querySelector২০০৯ অবধি ব্রাউজারগুলিতে প্রেরণ করা হয়নি এবং এর কিছুক্ষণ পরে ডেভেলপাররা ব্যাপকভাবে ব্যবহার করা হয়নি। আমি jQuery এত এত বেশি কখনও ব্যবহার করি নি, তবে এটি জেএসের বিবর্তনে উল্লেখযোগ্যভাবে প্রভাবিত করেছিল।
রাউনিন

এটি চেক বাক্সটি সেট করে তবে অগত্যা সম্পর্কিত ইভেন্টটি ট্রিগার করে না। ব্যবহারকারী কোনও রেডিও বোতাম ক্লিক করলে কোন ইভেন্টটি ট্রিগার হয়?
রবিস্রোব

17

আপনি যদি "1234" বোতামটি সেট করতে চান তবে আপনাকে এটির "আইডি" ব্যবহার করতে হবে:

document.getElementById("_1234").checked = true;

আপনি যখন ব্রাউজারের API ("getElementById") ব্যবহার করছেন, আপনি নির্বাচক বাক্য গঠন ব্যবহার করবেন না; আপনি সন্ধান করছেন এমন প্রকৃত "আইডি" মানটি সবেমাত্র পাস করুন। আপনি jQuery বা .querySelector()এবং এর সাথে নির্বাচক বাক্য গঠন ব্যবহার করেন .querySelectorAll()


প্রত্যেকে আইডি দিয়ে উপাদানটি পাচ্ছে আমার কাছে একই নামে একাধিক রেডিও বোতাম রয়েছে। এবং আমি মনে করি এটিই বেশিরভাগ ব্যক্তির নাম অনুসারে একটি গ্রুপ রেডিও নির্বাচন করতে হবে এবং তারপরে তার মধ্যে একটিতে মান পরীক্ষা করে দেখতে হবে।
Ndm Gjr

@ নাদিমগারসি "আইডি" বৈশিষ্ট্যটি একাধিক উপাদান দ্বারা ভাগ করা যায় না। সমস্ত "আইডি" মান অবশ্যই প্রদত্ত পৃষ্ঠায় অনন্য হতে হবে।
পয়েন্টি

10

আজ, ২০১ 2016 সালে, এটি document.querySelectorআইডি না জেনে ব্যবহার করা নিরাপদ (বিশেষত যদি আপনার কাছে ২ টিরও বেশি রেডিও বোতাম থাকে):

document.querySelector("input[name=main-categories]:checked").value

4
ঠিক আছে, তবে কীভাবে আমি বিপরীত প্রভাব পেতে পারি বা মানের উপর ভিত্তি করে একটি রেডিও পরীক্ষা করতে পারি .. এবং এটিই আসলে প্রশ্নটি ছিল।
Ndm Gjr

4
@ নাদিমগারসি আমি কোয়েরিলেক্টর
কেভিনফ

6

সহজ উপায় সম্ভবত নীচে jQuery সঙ্গে হবে:

$(document).ready(function(){
  $("#_1234").attr("checked","checked");
})

এটি "চেক করা" (যা এইচটিএমএলে কোনও মানের প্রয়োজন হয় না) একটি নতুন বৈশিষ্ট্য যুক্ত করে। শুধু jQuery লাইব্রেরি অন্তর্ভুক্ত মনে রাখবেন:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

অথবা শুধু$("#_1234").prop("checked", true)
undefined


3

আমি মানটি লোড করার জন্য ওয়েব এক্সটেনশন বিকল্প পৃষ্ঠার মধ্যে ফায়ারফক্স 72২ তে এই জাভাস্ক্রিপ্ট কোডটি ব্যবহার করে একটি রেডিও ইনপুট বোতামটি নির্বাচন করতে (চেক করতে) সক্ষম হয়েছি:

var reloadItem = browser.storage.sync.get('reload_mode');
reloadItem.then((response) => {
    if (response["reload_mode"] == "Periodic") {
        document.querySelector('input[name=reload_mode][value="Periodic"]').click();
    } else if (response["reload_mode"] == "Page Bottom") {
        document.querySelector('input[name=reload_mode][value="Page Bottom"]').click();
    } else {
        document.querySelector('input[name=reload_mode][value="Both"]').click();
    }
});

সংরক্ষণের সাথে সম্পর্কিত কোডটি যেখানে মানটি ছিল:

reload_mode: document.querySelector('input[name=reload_mode]:checked').value

নিম্নলিখিতগুলির মতো এইচটিএমএল দেওয়া হয়েছে:

    <input type="radio" id="periodic" name="reload_mode" value="Periodic">
    <label for="periodic">Periodic</label><br>
    <input type="radio" id="bottom" name="reload_mode" value="Page Bottom">
    <label for="bottom">Page Bottom</label><br>
    <input type="radio" id="both" name="reload_mode" value="Both">
    <label for="both">Both</label></br></br>
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.