This question already has an answer here:
Greasemonkey to change value of Radio buttons in a form?
(1 answer)
Closed 4 years ago.
I want select auto radio button with Greasemonkey. But I want select radio with label name.
When I see that four radio button, Greasemonkey need select my option.
Example: I want auto select label Instagram.
<label for="ContentPlaceHolder1_answer3">Instagram</label>
How can I select this radio button with Greasemonkey?
<div class="row">
<input type="radio" tabindex="3" value="answer1" name="ctl00$ContentPlaceHolder1$1" id="ContentPlaceHolder1_answer1"><label for="ContentPlaceHolder1_answer1">Twitpic</label></div>
<div class="row">
<input type="radio" tabindex="4" value="answer2" name="ctl00$ContentPlaceHolder1$1" id="ContentPlaceHolder1_answer2"><label for="ContentPlaceHolder1_answer2">Yfrog</label></div>
<div class="row">
<input type="radio" tabindex="5" value="answer3" name="ctl00$ContentPlaceHolder1$1" id="ContentPlaceHolder1_answer3"><label for="ContentPlaceHolder1_answer3">Instagram</label></div>
<div class="row">
<input type="radio" tabindex="6" value="answer4" name="ctl00$ContentPlaceHolder1$1" id="ContentPlaceHolder1_answer4"><label for="ContentPlaceHolder1_answer4">Flickr</label></div>
</div>
Try this:
var label="whatever"; //The label you want to look for, you may already have some such variable
var allLabels=document.getElementsByTagName("label"); //Get all labels
for (var i=0;i<allLabels.length;i++) { //Loop through labels
if (allLabels[i].innerHTML.toLowerCase()==label) { //If a match is found...
allLabels[i].parentNode.getElementsByTagName("input")[0].checked=true; //Check the parent element for inputs (radio buttons, for instance), and check the first one
}
}
I can't tell for sure if that will work without knowing how the HTML is put together. You gave the HTML in your question, but I don't know if it retains that constant format.
I've not used xpath in a while, so it might not do anything :)
But in theory, this will search for all labels where the text constains "Instagram", and then it loops through all the results, taking the for attribute to get the radio button and sets it's checked to true. (although i think its "selected" for radio buttons?)
function xpathSnapshot(expression,context) {
var r=document.evaluate(expression,context,null,6,null),i=r.snapshotLength-1;
this.iterate=function() {return r.snapshotItem(i--)}
}
var labels = xpathSnapshot("//label[contains(text(),\"Instagram\")]",document);
while (label = labels.iterate()) {
document.getElementById(label.getAttribute("for")).checked = true;
}
var labels = document.getElementsByTagName('label'); //get the labels
for (var i = 0; i < labels.length; ++i) { //loop through the labels
if (labels[i].textContent == "Instagram") { //check label text
labels[i].click(); //if correct text, click the label
}
}
Related
I need to know if a radio button has been selected to hide / show other options.
<input #r4 type="radio" name="x">
<span>Group</span>
<div class="subOption" *ngIf="r4.checked"></div>
div.subOption must be displayed when it has been selected.
it's correct?¿
I would just create a new boolean variable in the component, that you set as true when radio button has been checked. With that boolean you then display the div. So for example:
isChecked: boolean = false; // our new variable
<input type="radio" name="x" (click)="isChecked = true">
<div *ngIf="isChecked">
<!-- Your code here -->
</div>
EDIT: As to multiple radiobuttons... as mentioned in a comment, radio buttons seems at this point be kind of buggy with Angular. I have found the easiest way to deal with radio buttons seems to be using a form. So wrap your radio buttons in a form, like so:
<form #radioForm="ngForm">
<div *ngFor="let val of values">
<input (change)="changeValue(radioForm.value)" type="radio" [value]="val.id" name="name" ngModel />{{val.name}}
</div>
</form>
whereas on radio button would look like the following in this example:
{
id: 1,
name: 'value1'
}
In the form there is a change event, from which we pick up the chosen radio button value.
(change)="changeValue(radioForm.value)"
Then I would just play with boolean and the value chosen:
changeValue(val) {
this.valueChosen = true; // shows div
this.chosenVal = val.name; // here we have the value chosen
}
A plunker to play with: here
I want to use the text 5 and 6 shown below. I cant modify the html as it is auto-generated and there are many other radios with the same structure. How can i achieve this using jQuery or JavaScript and store them as variables.
<label class="radio">
<label style="display: none;">
<input type="radio" name="x_keeper1_price" id="x_keeper1_price_0" value="21"/>
</label>
5
</label>
<label class="radio">
<label style="display: none;">
<label style="display: none;">
<input type="radio" name="x_Defd5_price" id="x_Defd5_price_0" value="28"/>
</label>
</label>
6
</label>
If your text after the radio button is html code, this is a better solution:
var text = $("#x_keeper1_price_0") //the radio button
.closest("label.radio") //the label with class=radio)
.html() //the html code
.replace(/<label[\d\D]+<\/label>/, '');
/* Removing the "second" label and its content.
That will get the text after the radio button. */
alert(text);
jsfiddle: http://jsfiddle.net/72KcV/3/
For this specific markup, you can use the following jQuery code:
$('label.radio').each(function(){
console.log($(this).contents()[2].nodeValue)
});
http://jsfiddle.net/eKG22/
You can do the following
$('.radio').text()
see a working solution here: http://jsfiddle.net/TfP5X/
Because we are using a class to select the text, you might want to loop over the selector and do something with each value like so.
var items = $('.radio');
$.each(items, function(i, item) {
var text = $(item).text();
//do something with text
});
I have a reason to use checkboxes instead of radio buttons so please don't suggest I use radio buttons but need to duplicate the functionality. However when I select the Yes checkbox, it disables the No checkbox for some reason. When no is selected I want to hide the div and deselect Yes, and the opposite when I select Yes I want to show the div and uncheck NO. The only way I can select NO when Yes is checked is to uncheck it.
Working demo Here
JS Fiddle not working Here
Javascript
function injure() {
if (document.getElementById("f2").checked == true) {
document.getElementById("LocFall").style.display="block";
document.getElementById("f1").checked = false;
} else {
if (document.getElementById("f1").checked == true) {
document.getElementById("LocFall").style.display="none";
document.getElementById("f2").checked = false;
}
}
}
CSS
#LocFall {
display:none;
}
HTML
<input type="checkbox" id="f1" name="" onclick="injure();">
<label for="f1"> No </label><BR>
<input type="checkbox" id="f2" name="" onclick="injure();">
<label for="f2"> Yes</label><BR>
<div id="LocFall">
Show some stuff
</div>
http://jsfiddle.net/6NN6s/14/
<input type="checkbox" id="f1" name="same" onclick="injure(this);" />
<label for="f1">No</label>
<BR>
<input type="checkbox" id="f2" name="same" onclick="injure(this);" />
<label for="f2">Yes</label>
<BR>
<div id="LocFall">Show some stuff</div>
function injure(cmb) {
if (cmb.checked) {
if(cmb.id==="f2")
{ document.getElementById("LocFall").style.display = "block";
document.getElementById("f1").checked = false;
}
else
{
document.getElementById("LocFall").style.display = "none";
document.getElementById("f2").checked = false;
}
}
}
try this out, may be what you need.
In Fiddle change on the left in second drop-down list 'onLoad' to 'no wrap - in <head>'.
Split injure into a different function for each; if you choose No, then you cannot choose Yes because of the way your function is set up - the first condition will always evaluate as true.
The problem stems from not knowing which checkbox was actually clicked inside the function. As it is there's only two different ways the function can respond: one if f1 is checked and one if f2 is checked. The problem is there's actually more possible states that you're trying to represent.
State 1: Nothing checked, user clicks f1 or f2
State 2: f1 checked, f2 clicked
State 3: f2 checked, f1 clicked
Your code handles the first state fine but it can't deal properly with the second ones. If you split your code into two seperate functions to handle each box then you'll have all the necessary information to write correct decision logic.
There's also the states of clicking the same box, but they are simple and your code handles them already.
given the next HTML block:
<div class"radioGroup">
<input type="radio" value="0">
This is NOT checked
<input type="radio" value="1" checked = "checked" >
This is checked
<input type="radio" value="2">
This is NOT checked
</div>
How can i select the text following the selected radio button? (e.g "This is checked").
(I cant add tags to the strings or something like that, i'm trying to grab this text from another web page, so i can only use client side scripts)
You can use:
<input ... onclick="alert(this.nextSibling.data);">
Of course that is very dependent on the structure of the DOM. You may want to concatenate the data in all the text nodes from this element to the next, so you might need a function like:
function getTextByNodes(el) {
var text ='';
while (el && el.nextSibling && el.nextSibling.nodeType == 3) {
text += el.nextSibling.data;
el = el.nextSibling;
}
return text;
}
with:
<input ... onclick="alert(getTextByNodes(this));">
I am trying to create a simple interactive form for use with touch screen devices. The majority of the form is made up of radio buttons in groups of 5 (approx. 37 groups). I have a label tag for each radio button, and when selected (clicked), the background-color property of the label is changed to a highlighted colour using this JavaScript within each label tag OnClick="this.style.background='#5555ff';"
What I want to add to the above, is a JavaScript that will remove the above if the selection is changed within the group. E.g. A user selected radio button A in group 1, then changes their selection to radio button B in group 1. At the moment, both label backgrounds will be changed to the defined colour.
The HTML form is created dynamically by PHP so radio button names, IDs, & values will differ.
I have been unsuccessful trying to complete this task myself, and there doesn't seem to be a simple OnUnClick="xxx" either. I have searched on here for a solution but no questions match mine, although I have tried tweaking existing solutions to similar problems but to no avail.
Thank you for reading!
Here you go:
HTML
<html>
<body>
<div>
<input type="radio" id="g1v1" name="g1" value="v1" checked="checked"/> <label for="g1v1">V1</label>
</div>
<div>
<input type="radio" id="g1v2" name="g1" value="v2" /> <label for="g1v2">V2</label>
</div>
<div>
<input type="radio" id="g1v3" name="g1" value="v3" /> <label for="g1v3">V3</label>
</div>
<div>
<input type="radio" id="g1v4" name="g1" value="v4" /> <label for="g1v4">V4</label>
</div>
</body>
</html>
Javascript
$(document).ready(function(){
var selectedRadioColor = "yellow";
var normalRadioColor = "gray";
// For changing color while document loads
$.each($(":radio"), function(){
//alert( $(this).prop("id")+ $(this).prop("checked") );
if($(this).prop("checked") == false)
{
$(this).parent().css("color", normalRadioColor);
}
else
{
$(this).parent().css("color", selectedRadioColor );
}
})
// For updating color when user interacts with radio buttons
$(":radio").click(function(){
$("[name='"+$(this).prop("name")+"']").parent().css("color", normalRadioColor);
$(this).parent().css("color", selectedRadioColor );
})
})
Here is the link to jsfiddle for live demo:
http://jsfiddle.net/dharmavir/6UnDs/
assuming your radio buttons are grouped in a divs like this -
<div class="radio-group">
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="S">small<BR>
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="M">medium<BR>
<INPUT TYPE=RADIO NAME="pizzasize" VALUE="L">large<P>
</div>
You can do something like this in jquery -
$('input[type="radio"]').click(function(){
var parentElement = $(this).parent();
parentElement.find('input').css('background', '#000000'); //set to your neutral background for radio buttons
$(this).css('background', '5555ff');
});