I have started learning Angularjs and i am trying to implement in my project but Confused with condition.
What i want:-
I have few button with different colors and upon click of those buttons i want to change color of selected label. For selected label i have taken hidden field which stores value of label clicked.
So I want to first check that hidden field value and then change its color based on button click.
I came across these
<input type="button" value="Red" ng-click="myStyle={color:'red'}">
<label id="lbl1" ng-style="myStyle">
<label id=lbl2" ng-style="myStyle" >
<input id="hf" type="hidden" runat="server" />
But this will change color for all labels But i want to change for only one control based on hf value.
Hope its Understanable. Thanks in advance.
<div ng-app="" ng-controller="myController">
<input type="button" value="Red" ng-click="updateColor()">
<label id="lbl1" ng-style="myStyle">test</label>
<label id="lbl2" ng-style="myStyle">test2</label>
<input id="hf"
name="hf"
type="text"
runat="server"
value="lbl1"
ng-model="hf"/>
<pre>myStyle={{myStyle}}</pre>
<pre>hf={{hf}}</pre>
</div>
function myController($scope){
$scope.hf = document.getElementById('hf').value;
$scope.updateColor = function(){
document.getElementById($scope.hf).style.color = 'red';
}
}
http://jsfiddle.net/pa2yLtqz/
Related
I want to check radio buttons contained in a div based on their parent ID, they set a variable that's used in a function but I can't select them.
<label id="radio-step-1" class="btn btn-radio mx-auto" onclick="step=1;">
<input type="radio" autocomplete="off">one
</label>
<label id="radio-step-2" class="btn btn-radio mx-auto" onclick="step=2;">
<input type="radio" autocomplete="off">two
</label>
function setStep(){
document.querySelector("radio-step-" + step "input[type=radio]").checked = true;
}
In your code there is no div, Do you want to check the label instead of div.? You have to add # to select the id, and make the proper concatenation
document.querySelector("#radio-step-" + step+" input[type=radio]").checked = true;
I'm trying to make multiple select with checkbox ... if I click checkbox A then checkbox B follow click too. But only the A checkbox that appears, the B checkbox I created in a hidden state with css ..
<button type="button" id="delete" title="Delete">Delete</button>
<input type="checkbox" class="select_data" id="A" name="A[]" value="A" />
<input type="checkbox" class="info_del" id="B" name="B[]" value="B">
$('#delete').click(function() {
if($('#A').is(":checked")) {
$('#B').attr('checked', true).val();
}
var data = $(".select_data:checked, .info_del:checked").serialize();
console.log(data);
});
I believe you have a syntax issue with one line of your jQuery.
Try changing this line:
$('#B').attr('checked', true).val();
to:
$('#B').prop('checked', true);
Here is a working pen.
Here is the code on selection of any one of the radio button i need to get the value
<label ng-repeat="SurveyType in SurveyTypes">
<input type="radio" name="SurveyTypeName" ng-model="surveyData.SurveyTypeName" ng-value="{{surveyData.SurveyTypeName}}" />
{{SurveyType.Name}}
</label>
You should assign value from your repeat-loop not from model value and no need to use {{}} for ng-value
so use ng-value="SurveyType.Name" instead of ng-value="{{surveyData.SurveyTypeName}}" so selected radio button value set to surveyData.SurveyTypeName.
If you want to select anyone by default you can assign value to surveyData.SurveyTypeName like $scope.surveyData={SurveyTypeName: 'second'} then that radio button shown as selected that has value second.
HTML:
<label ng-repeat="SurveyType in SurveyTypes">
<input type="radio" name="SurveyTypeName" ng-model="surveyData.SurveyTypeName" ng-value="SurveyType.Name" />
{{SurveyType.Name}}
</label>
PLUNKER DEMO
Your HTML should be like this.
<input type="radio" name="SurveyTypeName" ng-model="surveyData.SurveyTypeName" ng-value="{{surveyData.SurveyTypeName}}" ng-change="getval($index)"/>
Js
$scope.getval = function (index){
var servetypename =SurveyTypes[index];
var data =servetypename.SurveyTypeName
}
Don't know from surveyData.SurveyTypeName is coming from.
<li ng-repeat="SurveyType in SurveyTypes">
<input type="radio" name="SurveyTypeName" ng-model="$parent.rdoSelected" ng-value="SurveyType.SurveyTypeName" />
{{SurveyType.Name}}
</li>
PLUNKER
I want to make radio buttons disappear and instead of buttons, the label of the radio buttons will be clickable itself and i will change the background color of the selected radio. How can i do this? For example, I have "yes" and "no" labels and these labels will be clickable and there will be no radio buttons at all. These are only changing color of background but showing radio buttons which is not wanted.
Javascript
$(document).ready(function(){
var ok = "green";
var notok = "red";
$.each($(":radio"), function(){
if($(this).prop("checked") == false)
{
$(this).parent().css("background", notok);
}
else
{
$(this).parent().css("background", ok );
}
})
$(":radio").click(function(){
$("[name='"+$(this).prop("name")+"']").parent().css("background", notok);
$(this).parent().css("background", ok );
})
})
HTML
<FORM name="form1">
<div>
<input type="radio" id="yes" name="q"checked="checked"/> Yes
</div>
<div>
<input type="radio" id="no" name="q"/>No
</div>
</FORM>
Thanks
This one is actually deceptively easy. If you just use a "label" tag, it will be clickable. Then you can simply hide the radio button.
<input id="yes" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="yes">Yes </label>
<input id="no" type="radio" name="q" value="radiobutton" style="display:none;" />
<label for="no">No</label>
btw, here's a JSFiddle of it working: http://jsfiddle.net/scGE9/2/
If I understand what you're asking, I'd hide the radio buttons, then attach a click handler to the labels that changed the background color:
$('label').click(function () {
$('label').removeClass('selected');
$(this).addClass('selected');
});
Here's a jsfiddle to demonstrate.
In short, when a label is clicked, remove the 'selected' class controlling the background color from all relevant labels, and apply it to the one that was clicked.
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');
});