Consider I have 4 radio buttons as in html
<form id="form">
<input type="radio" name="stack" value="north">north<br>
<input type="radio" name="stack" value="east" >east<br>
<input type="radio" name="stack" value="west">west<br>
<input type="radio" name="stack" value="south">south
</form>
How do I get the value of selected radio button and assign onto a global variable, on selection , using D3.js ,such a way I can toggle between selections?
If those are the only inputs you have, you can do:
d3.selectAll("input").on("change", function(){
console.log(this.value)
});
To select only that specific group of radio buttons, use their name:
d3.selectAll("input[name='stack']").on("change", function(){
console.log(this.value)
});
To assign it to a global (declaring without var):
d3.selectAll("input[name='stack']").on("change", function(){
globalVariable = this.value;
});
Here is the demo:
d3.selectAll(("input[name='stack']")).on("change", function(){
console.log(this.value)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<form id="form">
<input type="radio" name="stack" value="north">north<br>
<input type="radio" name="stack" value="east" >east<br>
<input type="radio" name="stack" value="west">west<br>
<input type="radio" name="stack" value="south">south
</form>
Related
I Need to create two forms with radio buttons as following bellow and then, when change checked, I need to change automatically in the second form (jquery or javacript):
<form id="form-a" name="form-a">
<input type="radio" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" name="name-d" id="id-d" value="No" />
</form>
Just change the name attribute values on the radio buttons to group them and then just add an event listener to listen for changes.
Here is an example.
var radioBtns = document.querySelectorAll("input[type=radio]");
function radioChangeHndl(evt) {
radioBtns.forEach(function(radioBtn) {
radioBtn.checked = '';
if(radioBtn.value === this.value) {
radioBtn.checked = 'true'
}
}.bind(this))
}
radioBtns.forEach(function(radioBtn) {
radioBtn.addEventListener('change', radioChangeHndl);
});
<form id="form-a" name="form-a">
<input type="radio" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" name="name-d" id="id-d" value="No" />
</form>
EDIT: Changed the HTML and JS. Know you just have to add the classes to the Radiobuttons. Tsted with Firefox, Chrome and IE 11. Maybe its not working because jquery is not loaded? If you Add jquery in the Javascript-Part, its working.
My solution is working in both ways. Click on form-a and form-b
HTML:
I changed the button names for grouping. JQuery selector is the classname i added.
<body onload="bodyLoad()">
<form id="form-a" name="form-a">
<input type="radio" class="radioA" name="name-a" id="id-a" value="Yes" checked="checked" />
<input type="radio" class="radioB" name="name-b" id="id-b" value="No" />
</form>
<form id="form-b" name="form-b">
<input type="radio" class="radioA" name="name-c" id="id-c" value="Yes" checked="checked" />
<input type="radio" class="radioB" name="name-d" id="id-d" value="No" />
</form>
JS:
I decided to use click event.
function bodyLoad () {
$("input:radio").click(function() {
var myClass = $(this).attr("class");
$("input:radio").prop('checked',false);
$("." + myClass).prop('checked',true);
});}
I have 2 groups of radio buttons. When a button in on group is clicked any button in the other group should be unchecked, and vice versa.
I tried below which works only once.
The smartest way I thought would be click(). But I can't get my head around it. Any suggestions?
function uncheckRadioBtnSet(){
if ($('[name="a"]').is(':checked')){
$('input[name="b"]').removeAttr('checked');
$(this).off('click');
}else{
$('input[name="a"]').removeAttr('checked');
$(this).off('click');
}
}
$("input[name='a']").click(function(){
uncheckRadioBtnSet();
});
$("input[name='b']").click(function(){
uncheckRadioBtnSet();
});
<input type="radio" name="a" value="1"><br>
<input type="radio" name="a" value="2"><br>
<input type="radio" name="a" value="3"><br>
<h6> separator </h6>
<input type="radio" name="b" value="4"><br>
<input type="radio" name="b" value="5"><br>
<input type="radio" name="b" value="6"><br>
Try this nanocode :)
$("input[name='a'], input[name='b']").click(function(){
$('input[name="'+{b: 'a',a: 'b'}[this.name]+'"]').prop("checked", false);
});
Plunker
Updated code according to new requirements
$("input[name='item_meta[313]'], input[name='item_meta[314]']").click(function(){
$('input[name="'+{'item_meta[313]' : 'item_meta[314]', 'item_meta[314]' : 'item_meta[313]'}[this.name]+'"]').prop("checked", false);
});
However, for the sake of readability, you can also write this code as:
var obj = {
'item_meta[313]' : 'item_meta[314]',
'item_meta[314]' : 'item_meta[313]'
}
$("input[name='item_meta[313]'], input[name='item_meta[314]']").click(function(){
$('input[name="'+obj[this.name]+'"]').prop("checked", false);
});
See this updated Plunker
You can use this:
$("input[name='a']").click(function(){
$('input[name="b"]').prop("checked", false);
});
$("input[name='b']").click(function(){
$('input[name="a"]').prop("checked", false);
});
Demo: https://jsfiddle.net/iRbouh/xn61vs1q/
it will be ok if we use same name for all radio buttons
<input type="radio" name="a" value="1"><br>
<input type="radio" name="a" value="2"><br>
<input type="radio" name="a" value="3"><br>
<h6>
separator
</h6>
<input type="radio" name="a" value="4"><br>
<input type="radio" name="a" value="5"><br>
<input type="radio" name="a" value="6"><br>
How to change submit button text based on which radio-button is active?
Here is my code, but it does not work. It changes text only once.
I have two radio-buttons:
<input type="radio" name="build-team" class="choose" value="build" /> Yes
<input type="radio" name="build-team" class="choose" value="show" /> No
<button class="show-result" data-chooseyes="Yes" data-chooseno="No">Yes</button>
And I have script:
$(document).on('click', '.choose', function() {
var target = $('.show-result');
if ($(this).attr('checked') == 'checked') {
target.html(target.data('chooseyes'));
}
else {
target.html(target.data('chooseno'));
}
})
JSFiddle example
$(document).on('click', '.choose', function() {
var target = $('.show-result');
target.html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="build-team" class="choose" value="Yes" /> Yes
<input type="radio" name="build-team" class="choose" value="No" /> No
<button class="show-result" data-chooseyes="Yes" data-chooseno="No">Yes</button>
$('.opt').click(function(){
$('#button').html($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="opt" name="opt" type="radio" value="Yes" checked="checked">Yes
<input class="opt" name="opt" type="radio" value="No">No
<button id="button" type="submit">Yes</button>
This is the easiest answer, no added attributes, only clean HTML + jQuery, it is also important to realize that there must always be a radio selected/checked by default, if not, you would have to validate the field and validating a radio is not cool haha :) have a nice day!
I am trying to set the value of the radio button via javascript. But I am not being able to do so. What I tried to do was have 4 radio buttons one of which is already selected. If I select some other radio button and click on Refresh, default radio button should be selected.
http://jsfiddle.net/ds345/Un8XK/1/
HTML:
<fieldset data-role="controlgroup" data-type="vertical">
<input type="radio" name="radio" id="x" data-theme="a" />
<label for="x" style="color: White">X</label>
<input type="radio" name="radio" id="y" onclick="axisonoff(this)" data-theme="a" />
<label for="y" style="color: White">Y</label>
<input type="radio" name="radio" id="z" data-theme="a" />
<label for="z" >Z</label>
<input type="radio" name="radio" id="none" data-theme="a" />
<label for="none" style="color: White">None</label>
</fieldset>
<button id = "Refresh" value="Refresh">Refresh</button>
JS:
$(document).ready(function () {
$("#none").attr("checked", true).checkboxradio("refresh"); // if this line is not present initially then it works for the 1st refresh.
});
$("#Refresh").click(function(){
$("#x").attr("checked", false).checkboxradio("refresh");
$("#y").attr("checked", false).checkboxradio("refresh");
$("#z").attr("checked", false).checkboxradio("refresh");
$("#none").attr("checked", true).checkboxradio("refresh");
});
I am sure that I have missed something very small but not able to figure out why this approach is not working.
Tools used: Javascript,Jquery 1.9 and JQuery mobile 1.3
Thanks,
Deeksha
You should use prop over attr when dealing with boolean attributes.
.attr("checked", false) will add checked="false" to your element.In HTML, <input checked="false" .../> is the same as <input checked="true" .../> or simply <input checked .../> as the attribute simply needs to be present on the element for it to be active.
See this JSFiddle example.
Change your code to use .prop() instead:
$("#none").prop("checked", false)...
Here is a fixed version of your JSFiddle demo: http://jsfiddle.net/Un8XK/8/
What you have missed is that there is no need for script. Simply use a form with a reset button:
<form>
<input type="radio" name="radio" value="0" checked>0<br>
<input type="radio" name="radio" value="1">1<br>
<input type="radio" name="radio" value="2">2<br>
<input type="radio" name="radio" value="3">3<br>
<input type="reset">
</form>
If you really must use script, you can simply return the radio buttons to their default by adding a button to the form:
<input type="button" onclick="reset(this.form.radio);" value="Script reset">
and a function:
<script>
function reset(els) {
for (var i=0, iLen=els.length; i<iLen; i++) {
els[i].checked = els[i].defaultChecked;
}
}
</script>
How can I set html radio value from javascript ??
I try this code
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$.getJSON("getquestion.php",function(result)
{
//set radio value
//$("#choice").html(result.test_choice_a);
//$("#choice").val(result.test_choice_a);
//$("#choice").html(result.test_choice_b);
//$("#choice").val(result.test_choice_b);
//$("#choice").html(result.test_choice_c);
//$("#choice").val(result.test_choice_c);
//$("#choice").html(result.test_choice_d);
//$("#choice").val(result.test_choice_d);
document.testform.choice[0].value = result.test_choice_a;
document.testform.choice[1].value = result.test_choice_b;
document.testform.choice[2].value = result.test_choice_c;
document.testform.choice[3].value = result.test_choice_d;
}
</script>
<input type="radio" name="choice" id="choice" ><br>
<input type="radio" name="choice" id="choice"><br>
<input type="radio" name="choice" id="choice"><br>
<input type="radio" name="choice" id="choice"><br>
but it didn't work.
How can I set it ?? help me please.
Maybe the content hasn't loaded yet put your ajax call in a $(document).ready()
$(document).ready(function(){
$.getJSON("getquestion.php",function(result)
{
//set radio value
//$("#choice").html(result.test_choice_a);
//$("#choice").val(result.test_choice_a);
//$("#choice").html(result.test_choice_b);
//$("#choice").val(result.test_choice_b);
//$("#choice").html(result.test_choice_c);
//$("#choice").val(result.test_choice_c);
//$("#choice").html(result.test_choice_d);
//$("#choice").val(result.test_choice_d);
document.testform.choice[0].value = result.test_choice_a;
document.testform.choice[1].value = result.test_choice_b;
document.testform.choice[2].value = result.test_choice_c;
document.testform.choice[3].value = result.test_choice_d;
});
});
Also element ids should be unique.
You need to give every radio a uniquie id.
<script type="text/javascript">
$.getJSON("getquestion.php",function(result) {
//set radio value
$("#choice_1").val(result.test_choice_a);
$("#choice_2").val(result.test_choice_b);
$("#choice_3").val(result.test_choice_c);
$("#choice_4").val(result.test_choice_d);
}
</script>
<input type="radio" name="choice" id="choice_1" ><br>
<input type="radio" name="choice" id="choice_2"><br>
<input type="radio" name="choice" id="choice_3"><br>
<input type="radio" name="choice" id="choice_4"><br>
You can't give an id to many elements
$(document).ready(function () {
$.getJSON("getquestion.php", function (result) {
$("#choice_1").val(result.test_choice_a);
$("#choice_2").val(result.test_choice_b);
$("#choice_3").val(result.test_choice_c);
$("#choice_4").val(result.test_choice_d);
});
});