Confusion over radio buttons - javascript

I'm iterating over radio buttons previous neighbors. My html looks like this :
<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="" />
</div>
<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="checked" />
</div>
<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="" />
</div>
I'm trying to add class red to span whose neighbor radio button is checked. Here is how I tried :
$('.holder span').each(function(){
var spanElement = $(this);
if(spanElement.nextAll(':radio:first').is(':checked')){
spanElement.addClass("red");
}
});
I always end up with last span (the one in third holder div) having class red. But as you can see the middle one is checked. Same thing happens when I set checked=checked on first span
Update
Tried also :
$('.holder span').each(function(){
if($(this).next().attr("checked") == "checked"){
$(this).addClass("red");
}
});
Same result, don't know what else to try.
Update II:
Html get rendered with previous information generated from server side, so there can only one checked=checked radio input element once html is created.
I'm doing this iteration trough span in document ready function.

You can select the checked input and add class to it's sibling span element.
$('.holder input[type=radio]:checked').prev('span').addClass('red')
http://jsfiddle.net/TdR7k/
In case that you want to add and remove the classes on change event you can try the following:
$('.holder input[type=radio]').change(function() {
$('.red').removeClass('red');
$(this).prev('span').addClass('red')
}).change()
http://jsfiddle.net/dSv6P/

Try this change:
$('.holder span').each(function(){
var spanElement = $(this);
if(spanElement.next('input[type=radio]').is(':checked')){
spanElement.addClass("red");
}
});

The problem is the way you define the radio buttons, do not include the checked attribute in the html or they will be checked by default
example: http://jsfiddle.net/TdR7k/1/
<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capabiy" value="primary" checked="" />
</div>
<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capability" value="primary" checked="checked" />
</div>
<div class="holder">
<span class="">some text</span>
<input type="radio" name="test_capabiliy" value="primary" checked />
</div>​
All three are checked
The proper definition of a radio button is
<input type="radio" name="(Group)" value="(etc)" />
And to check it by default, all that is required:
<input type="radio" name="(Group)" value="(etc)" checked />
You were adding three radio buttons of the same group that were all checked by default, so the last one was overriding the previous two and getting the red class
But mainly for the actual answer, do not include checked as an attribute and apply the javascript as an onclicked event, or only add the checked to a single element
here is an example of an onclick event:
http://jsfiddle.net/7kbLf/2/

If the Radio Button contains the checked attribute . Then it is by default checked..
<input type="radio" name="group1" value="hello" checked> // Checked by default.
So remove the checked property for other two RadioButtons.. if you don't do so because of the syntax the last item with checked property is checked by default..
<div class="holder">
<span>some text</span>
<input type="radio" name="test_capability" value="primary" />
</div>
<div class="holder">
<span>some text</span>
<input type="radio" name="test_capability" value="primary" checked="checked"/>
</div>
<div class="holder">
<span>some text</span>
<input type="radio" name="test_capability" value="primary" />
</div>
If you set the HTML this way your approach should work..
$('.holder span').each(function() {
var spanElement = $(this);
if (spanElement.nextAll(':radio:first').is(':checked')) {
spanElement.addClass("red");
}
});
// Change event
$('input[type="radio"]').on('change', function() {
$('span').removeClass('red');
if( this.checked){
$(this).closest('div.holder').find('span').addClass('red');
}
});
CHECK FIDDLE

Related

Using jquery to enable div on a page based on a radio button selection

I want to be able to enable a div if yes or no was selected from a radio button using jquery. The default is no div shows up
when the page loads. When you now select a radio button it determines which div shows up.
Here is what the html code will look like
<html>
<head>Testing</head>
<body>
<p>Are you 70 years and older? <input type="radio" value="yes" name="myradiobutton" /> Yes <input type="radio" value="no" name="myradiobutton" /> No</p>
<div style="display: none" id="yes">
<p>Yes was selected</p>
</div>
<div style="display: none" id="no">
<p>No was selected</p>
</div>
</body>
</html>
It is a long time I did jquery but was wondering how I can turn this on and off with jquery below.
How can I write this such that I will be able to control the styles on each div via jquery(turning it on and off based on the radio button selection)?
$(".myradiobutton").click(function(){
var selectedval = $("#myradiobutton input[type='radio']:checked").val();
if(selectedval == "yes"){
//show the yes div
}
if(selectedval == "no"){
//show the no div
}
});
Id must be unique .. You've to use it for only one element .. You can use same class for divs so you can hide both of them in one selection .. Also you can use the code like this instead of going with if statement .. And I prefer to use change event instead of click for radio,checkbox,select
$("[name='myradiobutton']").on('change' , function(){
var selectedval = $("input[type='radio'][name='myradiobutton']:checked").val();
$('.just_test').hide(0).filter('#'+selectedval).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Are you 70 years and older? <input type="radio" value="yes" name="myradiobutton" /> Yes <input type="radio" value="no" name="myradiobutton" /> No</p>
<div style="display: none" class="just_test" id="yes">
<p>Yes was selected</p>
</div>
<div style="display: none" class="just_test" id="no">
<p>No was selected</p>
</div>
Don't forget to add class="just_test" to the divs in html
You tried to use #myradiobutton as a query selector but the # represents the id attribute of an element which you don't have in your HTML code.
To fix it, you can't have your two <input type="radio"> elements both using the myradiobutton as id.
Instead of that, my suggestion is to use <label> to represent the <input>s.
Example below:
<input type="radio" name="age" value="yes" id="older-than-70">
<label for="older-than-70">Yes</label>
<input type="radio" name="age" value="no" id="younger-than-70">
<label for="younger-than-70">No</label>
<input> element uses attribute id to identify itself and uses attribute name="age" to group with other <input>s.
<label> element uses attribute for as a pointer to hook to the <input> with matching id.

Make check-boxes becoming one group of radio button

I cannot make the input name same or value same. The second and third inputs come from a loop using c# razor. I have 2 sets of radio inputs first one is one set and second and third are another set. Because the second and third have the same name, checking one makes the other unchecked. I want the same for all of them together so it would be like I have one set of 3 radio buttons. Like I said above I am not able to make the name or value same due to back-end data display issue. Here is my attempt below.
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>
<script>
$(document).ready(function () {
if ($('#dcenter-listradio').prop("checked", true)) {
$('#dcenter-allradio').prop("checked", false);
}
if ($('#dcenter-allradio').prop("checked", true)) {
$('#dcenter-listradio').prop("checked", false);
}
});
</script>
If you can give them all the same class, then you can just use jQuery to detect when a change has occurred and then uncheck other items in the same class.
$(document).ready(function() {
var selector = ".groupTogether";
// or if you can't give same class, you could use "#unrelatedRadio, input[name='related']"
$(selector).change(function()
{
if(this.checked)
{
$(selector).not(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="unrelatedRadio" name="unrelated" type="radio" class="groupTogether">unrelated</input>
<input id="relatedA" name="related" type="radio" class="groupTogether">Related A</input>
<input id="relatedB" name="related" type="radio" class="groupTogether">Related B</input>
Or, if you can't give them the same class, just replace the selector with something that selects both sets (in my example, "#unrelatedRadio, input[name='related']")
let radios = document.querySelectorAll("input");
for (let i of radios){
i.name="same"
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
//first radio <br/>
<div class="radio">
<label>
<input id="dcenter-allradio" type="radio" value="0" />All
</label>
</div>
//this radio button is a loop <br>
<input type="radio" name="#Model.Facet.Key" value="#item.Key">tagitem.j
<div class="radio">
<label>
<input id="dcenter-listradio" type="radio" name="#Model.Facet.Key" value="#item.Key" />tagItem.Name
</label>
</div>

Jquery - remove radio button

I have two radio buttons with text label. I try to remove the radio button that does not have value then the radio button was remove successfully, but the problem is its text label, I also want to remove them but i can not. Can anyone show me how to do that? Thank you so much for reading my question!
Add a class to the label when you remove the button with the name hidden for example. Then in the .css set the .hidden { display: none;}
you have two options
you can add same class name for both radio and text field and hide the class
eg:
<input type="radio" class="myclass" >
<label class="myclass">abc</label>
$(".myclass").hide();
2.also you can add input feild and lable to Div,hide div
eg:-
<div id="mydiv">
<input type="radio" ><label >abc</label>
</div>
$("#mydiv").hide();
This will work for you, use element.each to find all the radios without value and remove them ...
Here in this code, only first radio will be displayed because it has value and the second one is removed and the label for second is also removed...
$(document).ready(function(){
$('input[type="radio"]:not([value])').each(function() {
var idVal = $(this).attr("id");
$(this).remove();
$("label[for='"+idVal+"']").remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="submit" id="submit" action="#" method="post">
<label for="one">First Item</label>
<input type="radio" id="one" name="first_item" value="1" />
<label for="two">Second Item</label>
<input type="radio" id="two" name="first_item" />
</form>

Jquery focus not working / scrolling

I m using the following jquery script to pick a span having a class and focus it
<script type="text/javascript">
$(document).ready(function () {
$('span').each(function () {
if ($(this).hasClass('field-validation-error')) {
$(this).focus();
$(this).addClass('hello');
}
});
});
</script>
For some reasons the focus won't scroll to the span with the class 'field-validation-error' though it does add the class hello to the element.
The section of the html where this span element reside is as belwo
<section id="orderreason">
<div class="orderrow backgrounddot">
<ul>
<li class="widenormal">Please tell us the purpose of your request <span class="asterick">*</span><br>
(this information is used for statistical purposes only)</li>
</ul>
<br>
<p>Please tick any that apply:</p>
<div class="checkboxrow">
<input type="checkbox" value="1" name="orderreason"><label>Patient care</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="2" name="orderreason"><label>Health improvement</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="3" name="orderreason"><label>Professional development</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="4" name="orderreason"><label>Personal development</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="5" name="orderreason"><label>Management/service improvement</label>
</div>
<div class="checkboxrow">
<input type="checkbox" value="6" name="orderreason"><label>Research</label>
</div>
<p>Other:</p>
<span data-valmsg-replace="true" data-valmsg-for="orderreason" class="field-validation-error">Please choose a reason or enter other text</span>
</div>
</section>
You can focus on non-input elements if you give your HTML a tabindex attribute like so:
<span tabindex="-1"></span>
The -1 value makes it so that the element can't be tabbed by the user, but you can programmatically focus it with el.focus()
Aside
In your implementation, I assume you are creating validation errors. If the validation error occurs next to the input field, why not focus the input field instead of the span? This will have the added benefit of putting the user's cursor where it needs to be to fix the validation issue and deliver an overall better UX.

Checked Another hidden radio Button

hello,
I'm trying to select hidden radio input when selecting another one
<div class="questions">
<div class="questions_title">
<span> Q : What Are you doing now ?</span>
</div>
<div class="answers">
<script>
$('#answerid_').on('checked', function() {
$('#degres_').prop('checked', true);
return false;
});
</script>
<div class="field">
<input type="radio" value="1915" id="answerid_1" name="answerid_1" class="required">
<input type="hidden" value="0" id="degres_1" name="degres_1">
<span class="questions_label">Working. </span>
</div>
<div class="field">
<input type="radio" value="1916" id="answerid_2" name="answerid_1">
<input type="hidden" value="1" id="degres_2" name="degres_1">
<span class="questions_label">Playing.</span>
</div>
<div class="field">
<input type="radio" value="1917" id="answerid_3" name="answerid_1">
<input type="hidden" value="2" id="degres_3" name="degres_1">
<span class="questions_label">not Sleeping </span>
</div>
<div class="field">
<input type="radio" value="1918" id="answerid_4" name="answerid_1">
<input type="hidden" value="3" id="degres_4" name="degres_1">
<span class="questions_label">Nothing.</span>
</div>
</div>
I need => When selecting any answer the according next hidden degree would be checked too
You can't check a hidden-type input. However, you can check a radio-type invisible input (with display:none style).
it should be..
$('[id^=answerid_]').on('change', function() {
$(this).next().prop('checked', true);
return false;
});
You need wild card to attach event and change event.
Live Demo
$('[id^=answerid_]').on('change', function() {
$(this).next(':hidden').prop('checked', true);
return false;
});
Instead of using check of hidden I would suggest you to set the value of hidden field.
$(this).next(':hidden').val("true");
you can try this
JS CODE
$('[id^=answerid_]').on('change', function() {
$(this).siblings('[id^=degres_]').prop('checked', true);
alert($(this).siblings('[id^=degres_]').prop('checked'));
return false;
});
DEMO
You can't check a hidden-type input. it is expecting a value, so the value could be 1 if previous is cecked or 0 if not checked.
after use the folowing code
$('[id^=answerid_]').on('change', function() { $(this).siblings('[id^=degres_]').prop('checked', true); //alert($(this).siblings('[id^=degres_]').prop('checked')); return false; });
and changing hidden input to another radio because it now work and by adding
style="margin-left: -16px; position: absolute;"
for every answer input to be above degrees radio it work successfully.
but in the last question it's not work or check degree input :(

Categories