We Keep Coding

Why my "change" event hasn't worked as intended?

Okay, so I'm practicing my JS and HTML, my current code looks like this:
document.querySelector('input[name="answer"]:checked').checked = false;
let Select = document.querySelector('input[name="answer"]');
Select.addEventListener('change', function(event) {
alert(event.target.value)
})
<div>
<label><input type="radio" name="answer" value="1" checked="checked">1</label>
<label><input type="radio" name="answer" value="2">2</label>
</div>
My aim is to cancel first radio's "checked", then add an event that will show each of radio's value whenever I choose/"checked" it, but as you may notice, so far the alert will only shows up if I choose the first radio. So if I may ask, where did I do wrong and how can I fix it?
p.s. For the sake of practicing, the HTML has to stay the same. No adding Id or other selector.

You only get the first with querySelector
The querySelector(...:checked) will work because you can only have one checked radio
I really like to delegate - it is recommended and makes a lot of sense
document.querySelector('input[name="answer"]:checked').checked = false;
let radDiv = document.getElementById('radioDiv');
radDiv.addEventListener('change', function(event) {
const tgt = event.target;
if (tgt.matches("[type=radio][name=answer]")) { // check we have the right elements
alert(tgt.value)
}
})
<div id="radioDiv">
<label><input type="radio" name="answer" value="1" checked="checked">1</label>
<label><input type="radio" name="answer" value="2">2</label>
</div>

document.querySelector('input[name="answer"]:checked').checked = false;
let Select = document.querySelectorAll('input[name="answer"]');
Select.forEach(el => el.addEventListener('change',function (event) {
Select.forEach(e => alert(e.value));
}))
<div>
<label><input type="radio" name="answer" value="1" checked="checked">1</label>
<label><input type="radio" name="answer" value="2">2</label>
</div>

let Select = document.querySelectorAll('input[name="answer"]');
Select.forEach(function(elem) {
elem.addEventListener("change", function(event) {
alert(event.target.value)
});
});
Use above for element selector instead of querySelector which returns a single object (first match)
querySelectorAll returns an array of elements.

Handle click in VueJS and jQuery

I'm new in Vue, and I'm really in doubt about something. Well, I'm in doubt about the way we handle click event in Vue and jQuery. For me, at this moment, jQuery seems to be more simple to achieve.
in jQuery we just do that:
HTML:
<div class="jquery-radio">
Radio 1 <input type="radio" name="radio" class="choose-radio" value="Radio1" checked>
<br>
Radio 2 <input type="radio" name="radio" class="choose-radio" value="Radio2">
jQuery
$('.choose-radio').click(function() {
$('.choose-radio:checked').val() == 'Radio1' ? alert('Radio 1') :
$('.choose-radio:checked').val() == 'Radio2' && alert('Radio 2 ');
});
So, my doubt is. How to achieve this, using Vue? I tried to do this, but as I said, jQuery seems to be more simple, because instead of add #click="myMethod()" i just do what I want, selecting the element (class) $('.choose-radio);
HTML:
<div class="jquery-radio">
Radio 1 <input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio1" checked #click="showRadio1()">
<br>
Radio 2 <input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio2" #click="showRadio2()">
Vue
var app = new Vue ({
el: ".jquery-radio",
methods: {
showRadio1: function() {
alert("Show 1");
},
showRadio2: function() {
alert("Show 2");
}
}
});
Check Fiddle
These examples above, is basic. In my project, I'll show different sections based on the value previously chosen in radio. I'm realy confused in Vue.
Hope you guys can clarify this information for me!

You can add the same handler and pass in the event object, which you can later use to retrieve the current element. Here's an working example:
var app = new Vue ({
el: ".jquery-radio",
methods: {
show: function(event) {
var value = event.target.value
console.log(value)
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<div class="jquery-radio">
Radio 1
<input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio1" checked #click="show($event)">
<br>
Radio 2
<input type="radio" name="choose-radio-vue" class="choose-radio-vue" value="Radio2" #click="show($event)">
</div>
PS: also, your jQuery approach is far from optimal, as it may yield errors if there are more elements that have the .choose-radio class. What you need is something like:
$('.choose-radio').click(function() {
var value = $(this).val() // value of the selected object
});

It's a pretty different way of thinking. With Vue you want to change data and let Vue handle the DOM manipulation for you. I'd use v-model and toggle the visibility of sections based on that.
new Vue({
data: {
section: 'Radio 1'
}
}).$mount('#app')
label {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
<label><input name="section" type="radio" v-model="section" value="Radio 1"> One</label>
<div v-if="section === 'Radio 1'">
Radio One Is Selected!
</div>
<label><input name="section" type="radio" v-model="section" value="Radio 2"> Two</label>
<div v-if="section === 'Radio 2'">
Radio Two Is Selected!
</div>
<label><input name="section" type="radio" v-model="section" value="Radio 3"> Three</label>
<div v-if="section === 'Radio 3'">
Radio Three Is Selected!
</div>
</div>

angularjs dynamic radio button

The radio button are dynamically created.
the task i want is to have the first radio button selected by default and if i choose other option it should change and get selected, until that, first is the selected option.
tried this and many other codes by browsing. unable to find a perfect solution.
$scope.radioLoad = function() {
$scope.frmData.prpkval = 0;
$("input[name=primarypackage][value=" + $scope.frmData.prpkval + "]").prop('checked', true);
}
<input name="primarypackage" class="radioBtn" type="radio" init="radioLoad()" ng-value="{{frmData.prpkval}}" ng-model="$parent.primarypackage">

Please find the code here.
HTML:
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<div ng-app="app" ng-controller="test">
<span class="dymanic"></span>
</div>
JS:
var app = angular.module('app', []);
app.controller('test', function ($scope) {
$scope.createDynamicRadioButton = function () {
$('.dymanic').append(
'<div><label>Radio 1<input type="radio" name="radioButton"/></label></div>' + '<div><label>Radio 2<input type="radio" name="radioButton" /></label></div>' + '<div><label>Radio 3<input type="radio" name="radioButton" /></label></div>');
}
$scope.createDynamicRadioButton(); // generates radio button dynamically
$('input[name="radioButton"]').eq(0).prop('checked', true); //Checks the first radio button.
});

jQuery checking radio box status and showing an element

I'm trying to show a div of another set of radio boxes but only depending on which radio button is first selected.
If option option one is selected, I would like condition one div to show and if option two is selected I would like condition two div to show.
$(document).ready(function() {
$('#condition-one').hide();
$('#condition-two').hide();
if ($("id=[option-one]").is(":checked")) {
$('#visible-condition-one').show("slow");
} else if ($("id=[option-two]").is(":checked")) {
$('#visible-condition-two').show("slow");
};
});
<div id="always-visible">
<label class="control-label">Would you like option 1 or option 2</label><br>
<label class="radio-label"><input type="radio" id="option-one" name="option-info"> Option 1</label>
<label class="radio-label"><input type="radio" id="option-two" name="option-info"> Option 2</label>
</div>
<div id="condition-one">
<label class="control-label">If you pick option 1, you see this div</label><br>
<label class="radio-label"><input type="radio" id="option-three" name="option-info-group-two"> Option 3</label>
<label class="radio-label"><input type="radio" id="option-four" name="option-info-group-two"> Option 4</label>
</div>
<div id="condition-two">
<label class="control-label">If you pick option 2, you see this div</label><br>
<label class="radio-label"><input type="radio" id="option-five" name="option-info-group-three"> Option 5</label>
<label class="radio-label"><input type="radio" id="option-six" name="option-info-group-three"> Option 6</label>
</div>

$(document).ready(function() {
$('#condition-one').hide();
$('#condition-two').hide();
$("#option-one").on("change", function() {
if($(this).is(":checked")) {
$('#condition-one').show("slow");
}
});
$("#option-two").on("change", function() {
if($(this).is(":checked")) {
$('#condition-two').show("slow");
}
});
});
In your code, the action must be taken on user input, in this case, a radio box. You must attach a 'change' event to your radio boxes and when user changes status, the callback function is triggered.

How about the following:
//Cache our deciding radio buttons
var $radio = $('#always-visible :radio'),
//An array of the available radio/div identifiers
ids = ['one', 'two'];
//Bind an event to your deciding radio buttons
$radio.change(function(){
//That will loop through your radio buttons
$.each(ids, function(_, n){
//See if this one is checked
var checked = $('#option-' + n).prop('checked');
//If so, show the relevant block, otherwise hide it
$('#condition-' + n).toggle(checked);
});
//Trigger the event on page load
}).change();
JSFiddle

i just did something similar(working)
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#condition-one').hide();
$('#condition-two').hide();
$(".radio-label").on("change", function() {
if ($('.radio-label#1').is(':checked')) { // if the radiolabel of id=1 is checked
$('#condition-one').show("slow"); //show condition one
$('#condition-two').hide();
} else if ($(".radio-label#2").is(":checked")) {
$('#condition-two').show("slow");
$('#condition-one').hide("slow");
}
});
});
</script>
</head>
<body>
<input type="radio" class="radio-label" id="1" name="option-info"></input>
<input type="radio" class="radio-label" id="2" name="option-info"></input>
<div id="condition-one">
test1
</div>
<div id="condition-two">
test2
</div>
</body>

Need a way to integrate an Invert function(Check All/Uncheck All) through radio buttons - for the Checkbox group

Am relatively new to what I am doing here. I am just putting together stuff with what I find here and other open resources.
The problem I am having is - With the current setup a person can choose a radio button and check a couple boxes and goto the other radio button option and choose boxes under that. I am trying to get the Checkboxes to be All Checked when someone selects the radion option and UncheckALL when the person chooses another option on the radio button group.
So if I select option 'a' under 'GENERAL' and then goto 'DETAILED' - 'a' should be unchecked.
Heres the code I am using in JFiddle
HTML:
<div id="RadioWidget">
<label><input type="radio" name="chkboxs" value="General" />General Clean</label>
<label><input type="radio" name="chkboxs" value="Detailed" />Detailed Clean</label>
<label><input type="radio" name="chkboxs" value="Commercial" />Commercial Clean</label>
</div>
<div id="General" class="desc">
<p class="maintextBlue">General
<label><input type="checkbox" name="GeneralOptn[]" value="a" />a</label>
<label><input type="checkbox" name="GeneralOptn[]" value="b" />b</label>
</p>
</div>
<div id="Detailed" class="desc">
<p class="maintextBlue">Detailed
<label><input type="checkbox" name="DetailedOptn[]" value="a" />a</label>
<label><input type="checkbox" name="DetailedOptn[]" value="b" />b</label>
</p>
</div>
<div id="Commercial" class="desc">
<p class="maintextBlue">Commercial
<label><input type="checkbox" name="CommercialOptn[]" value="a" />a</label>
<label><input type="checkbox" name="CommercialOptn[]" value="b" />b</label>
</p>
</div>
Jscript:
$(document).ready(function() {
$("div.desc").hide();
$("input[name$='chkboxs']").click(function() {
var test = $(this).val();
$("div.desc").hide();
$("#" + test).show();
});
});
This was a piece of script I found that inverts the checkbox state. But not sure how to integrate it to the radio button. this snippet was working off a onClick() fn for a button.
$("A[href='#invert_selection']").click( function() {
$("#" + $(this).attr('rel') + " INPUT[type='checkbox']").each( function() {
$(this).attr('checked', !$(this).attr('checked'));
});
return false;
});
Any help is much appreciated...

this requires you to add IDS to your input fields... but it would work.
If you want to control multiple input fields you can always uses classes to..
jQuery("#generalA").click(function(){
if(jQuery(this).is(':checked')){
// is checked do some stuff if you want
}else{
// is mot checked uncheck the checkbox with an ID of #detailedA
jQuery('#detailedA').prop('checked', false);
}
return false;
});

The above response by AndrewMac helped.
I just had to figure out a way it helped my existing setup.
Below is the small addition I did to get the desired setup - this way it actually disables all the unnecessary inputs thereby eliminated from the final send out of the form.
$(document).ready(function() {
$("div.desc").hide().find('input, textarea').prop('disabled', true);;
$("input[name$='chkboxs']").click(function() {
var test = $(this).val();
$("div.desc").hide().find('input, textarea').prop('disabled', true);;
$("#" + test).show().find('input, textarea').prop('disabled', false);;
});
});
I have also updated the same on my fiddle page. Fiddle
Thanks for the help AndrewMac - Sorry for the long time to post this response/answer.