Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
My HTML script is
<html>
<body>
<b><font color="green">Please select a check box to change the color of text </font> </b><br>
<input type="checkbox" name="red" id="chkbx" > Red<br>
<input type="checkbox" name="green" id="chkbx" value="1"> Green <br>
<input type="checkbox" name="blue" id="chkbx" value="2"> Blue <br>
<input type="checkbox" name="orange" id="chkbx" value="3"> Orange <br>
<input type="checkbox" name="yellow" id="chkbx" value="4"> Yellow <br>
<p id="demo"></p>
<button onclick="myfunction()">My Choice</button>
<br><br>
<h style="color: red; font-weight: bold;"> </h>
<p id="demo"></p>
i need to get the checkbox value in javascript and if any one checkbox is selected that colour will apply to a text to display on the output. how to do?
First off - don't use the tag as it has been deprecated since 1999 use
<p style='font-weight:bold; color:green'>....</p>
Instead of checkboxs use radio buttons
<input type="radio" name="red" value="red" onClick="myFunction(this.value);"> Red<br>
Repeat the above for all possible selections.
Change your function myFunction() to myFunction( value ) and work from there. The information is passed directly to the function so there is no need to go looking for it.
Related
I got a weird question on Amazon MTurk's html layout. There is unexpected space under <form> when using the crowd elements by AWS.
Here is a piece of demo code:
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
<crowd-form answer-format="flatten-objects">
<div>
<form>
<p> Some random question</p>
<input type="radio" name="q-1" value="1"> <label>Choice1</label>
<br>
<input type="radio" name="q-1" value="2"> <label>Choice2</label>
<br>
<input type="radio" name="q-1" value="3"> <label>Choice3</label>
</form>
</div>
<p> Some random text to test the space after `form` </p>
</crowd-form>
which produces a multi-choice question with a ton of spaces (the second pic is directly after the first one -- but I have to screenshot two separate ones as the space is too long).
However, when commenting out the crowd html line, everything seems just fine:
<!--<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>-->
<crowd-form answer-format="flatten-objects">
<div>
<form>
<p> Some random question</p>
<input type="radio" name="q-1" value="1"> <label>Choice1</label>
<br>
<input type="radio" name="q-1" value="2"> <label>Choice2</label>
<br>
<input type="radio" name="q-1" value="3"> <label>Choice3</label>
</form>
</div>
<p> Some random text to test the space after `form` </p>
</crowd-form>
which produces the following:
Does anyone know why this happens, and how I could fix it if I still want to use the crowd form? Thanks!
You should omit the <form> elements.
<crowd-form> takes care of all the form submission for you.
You need to include (not comment out) the Crowd HTML Elements script import:
<script src="https://assets.crowd.aws/crowd-html-elements.js"></script>
Hope this helps.
Please let me know if you have additional questions.
Thank you,
Amazon Mechanical Turk
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I intend to write a piece of code to select one option in a radio button. I used the following code which is saw being used to select a dropdown. I modified it and used it but its not working. Could you please point out my error?
$("div.classradio radio").val("Male");
this is the code I used but it doesn't work.
$("div.classradio radio").prop("checked", true)
For versions of jQuery prior to 1.6, use:
$("div.classradio radio").attr('checked', 'checked');
Why you want do this with jQuery? It's very simple with HTML:
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
With jQuery you can do it like this:
$('input:radio[name=gender]')[1].checked = true;
The Number in the brackets indicates the radio button. Attention: jQuery starts counting at 0.
Please set the attribute of the input element by selector
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script>
$(document).ready(function () {
$('#FeMale').attr('checked',true);
});
</script>
</head>
<body>
<div class="container-fluid">
<input type="radio" name="Gender" value="Male" id="Male"/>Male
<input type="radio" name="Gender" value="FeMale" id="FeMale"/>Female
</div>
</body>
</html>
$("div.classradio radio").val("Male")
This code mean find the element with tag which is child of the div with class "classradio"
<div class="classradio">
<radio></radio>
</div>
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Improve this question
I want to hide all unchecked radio button and its label then display only the checked radio button using the submit button click event.
<form method="post">
<input type="radio" name="radiobtn">
<label for="first">First</label>
<input type="radio" name="radiobtn">
<label for="second">Second</label>
<input type="radio" name="radiobtn">
<label for="third">Third</label><br>
<input id="submit" type="submit">
</form>
I want to make this work using jQuery. Can anyone give me snippet of jQuery code on how to do this?
Do something simple like this
$('#submit').click(function(e) {
e.preventDefault(); // prevent the form submission
$('[name="radiobtn"]:not(:checked)') // get all unchecked radio
.hide() // hide them
.next() // get all label next to them
.hide(); // hide the labels
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form method="post">
<input type="radio" name="radiobtn">
<label for="first">First</label>
<input type="radio" name="radiobtn">
<label for="second">Second</label>
<input type="radio" name="radiobtn">
<label for="third">Third</label>
<br>
<input id="submit" type="submit">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Question 1</h2>
<div>
</div>
<div>
<input type="radio" name="name_radio1" value="value_radio1" onclick=$().hide(); />Audio Question
<input type="radio" name="name_radio1" value="value_radio2" onclick=$().hide(); />Image Question
<input type="radio" name="name_radio1" value="value_radio3" onclick=$().hide(); />Standard Question
</div>
<div align="center" style="padding:25px;width: 300px;">
<input name="question" size="35" class="standardQuestion" type="text" value="" />
<br>
<input name="audioFile" class="audioFile" type="file" />
<br>
<br>
<textarea name="message" rows="10" cols="20">
</textarea>
<br>
<input name="imageFile" class="imageFile" type="file" />
<br>
</div>
<div>
<h2>Question 2</h2>
<div>
</div>
<div>
<input type="radio" name="name_radio1" value="value_radio1" onclick=$().hide(); />Audio Question
<input type="radio" name="name_radio1" value="value_radio2" onclick=$().hide(); />Image Question
<input type="radio" name="name_radio1" value="value_radio3" onclick=$().hide(); />Standard Question
</div>
<div align="center" style="padding:25px;width: 300px;">
<input name="question" size="35" class="standardQuestion" type="text" value="" />
<br>
<input name="audioFile" class="audioFile" type="file" />
<br>
<br>
<textarea name="message" rows="10" cols="20">
</textarea>
<br>
<input name="imageFile" class="imageFile" type="file" />
<br>
</div>
<div>
`I am trying to add to an HTML Quiz editor started by someone else that allows me to add from 1 to n questions. Quiz questions can be based upon an audio recording, an image, or just plain text. If the question is an audio/image/text based question, I would need to only show the HTML form elements related to an audio/image/text based question. The questions on the quiz can be changed/updated/deleted by the user of the editor so an audio question could be changed to an image or text based question. If the question type is changed via a radio button, the appropriate controls for that question type need to be displayed.
For example...
Question 1
Radio ImageQuestion Radio AudioQuestion Radio TextQuestion
textbox 1 (Only show if Radio Button ImageQuestion is checked)
File (Only show if Radio Button AudioQuestion is checked)
textbox 2 (Only show if Radio Button TextQuestion is checked)
Question 2 (same elements as above)
....
Question N (same elements as above)
While each question will have the same HTML form elements, the data in each question should be independent so when I hide some control for question 1 since the user clicked on a specific radio button there, it should not impact what is diplayed for questions 2 to N.
The key constraint I would like to work with is not use id's since the code that I am working on is over halfway done and has been implemented without id's. And I could not hardcode the id's since I don't know how many of them will actually be needed. It would be a significant change to add id's but if that is the only reasonable way or clearly the best way that this can be accomplished, please let me know. Any advice on the best approach to take would be appreciated. Right now the code is using jquery/javascript and I would like to stick with that and basic html/css. I am speculating based upon my research that I may need to use code like .parent().find("a specific class") and the onclick event but I'm not sure if this is the right approach to take and is even feasible. Thanks.
Are you trying to do this without javascript?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
i have a text field , where i input the value to filter ....
<input type="text" name="filter" id="filter">
<input type="radio" name="item" id="item" value="1">apple
<input type="radio" name="item" id="item" value="2">banana
<input type="radio" name="item" id="item" value="3">grapes
<input type="radio" name="item" id="item" value="4">mango
<input type="radio" name="item" id="item" value="5">orange
<input type="radio" name="item" id="item" value="6">pineapple
if i input apple in text field, only radio button with apple has text value should appear , rest must hide . Is der any way to do that ?
Check out the jquery selectors page:
"Attribute Contains Selector [name*="value"]"
var name2lookFor = $('#filter').val();
var $matchingElements = $('input[type="radio"]').filter('[name*="'+name2lookFor +'"]');
There are a lot of other selectors, just find the one you need. You might need a combination to make a bit more custom search, but this should put you in the right track.
Offtopic: An id must be unique, you cant call them the same in the ID attribute.