Develop Reference

Show only Checked Options using Jquery

How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.
$("#checked_show").click(function() {
$("input").hide();
$("label").hide();
$("input:checked").show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>
How to show only those options which are checked and hide all those which are not checked?
My code just shows checkbox, and not the label.

You can use input:checked combined with :not() to select the inputs that aren't checked.
$("#checked_show").click(function() {
$("input:not(:checked)").each((i, el) => {
$(el).next().hide();
$(el).hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

You should use :checked to select the checked input and negate that with :not(), also to hide the labels you have to loop through all elements and select the next element using .next(), here is a working snippet:
$("#checked_show").click(function () {
if ($("input[type='checkbox']:checked").length) {
$("input[type='checkbox']:not(:checked)").each(function (idx, el) {
$(el).next().hide();
$(el).hide();
});
} else {
console.log('Please select an input!');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" name="locationthemes" id="checkbox-1" value="2" class="custom" />
<label for="checkbox-1">Castle</label>
<input type="checkbox" name="locationthemes" id="checkbox-2" value="3" class="custom" />
<label for="checkbox-2">Barn</label>
<br /><br />
<input type="checkbox" name="location" id="checkbox-3" value="5" class="custom" />
<label for="checkbox-3">Restaurant</label>
<input type="checkbox" name="location" id="checkbox-4" value="8" class="custom" />
<label for="checkbox-4">Bar</label>
<br /><br />
<button id="checked_show">Show only Checked</button>

Vue.js: The required fields get highlighted even before submitting in firefox

In macOS Sierra Version 10.12.6 and Firefox Version 56.0.2 (64-bit), the required fields get highlighted even before submitting, any help to fix this issue will be great help.
This works fine as the data radioInputVal is string:
var vm = new Vue({
el: '#app',
data: {
radioInputVal: ''
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<form>
<label for="input1">1:</label>
<input type="radio" name="test" id="input1" required value="1" v-modal="radioInputVal" />
<br />
<label for="input2">2:</label>
<input type="radio" name="test" id="input2" value="2" v-modal="radioInputVal" />
<br />
<label for="input3">3:</label>
<input type="radio" name="test" id="input3" value="3" v-modal="radioInputVal" />
<br />
<input type="submit" value="send" />
</form>
</div>
This doesn't work fine as it's data radioInputObj is an object.
var vm = new Vue({
el: '#app',
data: {
radioInputObj: {
val: ''
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
<form>
<label for="input1">1:</label>
<input type="radio" name="test" id="input1" required value="1" v-model="radioInputObj.someVal" />
<br />
<label for="input2">2:</label>
<input type="radio" name="test" id="input2" value="2" v-model="radioInputObj.someVal" />
<br />
<label for="input3">3:</label>
<input type="radio" name="test" id="input3" value="3" v-model="radioInputObj.someVal" />
<br />
<input type="submit" value="send" />
</form>
</div>
Below code is not linked to VUE.js and the required fields doesn't get highlighted until submitted.
<form>
<label for="input1">1:</label>
<input type="radio" name="test" id="input1" required value="1" />
<br />
<label for="input2">2:</label>
<input type="radio" name="test" id="input2" value="2" />
<br />
<label for="input3">3:</label>
<input type="radio" name="test" id="input3" value="3" />
<br />
<input type="submit" value="send" />
</form>

Proper JavaScript to show/hide inputs

I just want to know the proper function loop code for show/hide method.
This is the javascript for show/hide for the first (1) radio button:
function showHide(){
var chckbox = document.getElementById("chk");
var hiddeninputs = document.getElementsByClassName("hidden");
for(var i=0; i !=hiddeninputs.length; i++){
if(chckbox.checked){
hiddeninputs[i].style.display ="block";
}
else{
hiddeninputs[i].style.display ="none";
}
}
}
Yet I need the proper loop for having multiple objects (checkboxes) with seperated show/hide method. This is the first checkbox code:
<input type="checkbox" name="area" id="chk" onclick="showHide(this.checked);"/>
<label for="chk">Billing & Credit Management Systems</label>
<div class="hidden">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div>
And I need the loop code in order to prompt the show/hide to the following objects:
<input type="checkbox" name="area" id="chk1" onclick="showHide(this.checked);"/>
<label for="chk1">Customer Care Systems</label>
<div class="hidden">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>
Only the first checkbox prompts while the second one doesn't whenever I checked.

Not the exact answer you're looking for, but a bit simpler (less looping). Let me know if this works for you, I'll try my best to explain what's happening here.
I implemented this solution with the intention of forcing you to change as little as possible.
1) Assign a unique attribute to the checkbox and the div it belongs to. In this case I used "data-menu". In the onclick function, pass "this" instance of the element into the function showHide.
<input data-menu="1" type="checkbox" name="area" id="chk" onclick="showHide(this);"/>
<div class="hidden" data-menu="1">
2) Use the css class 'hidden' to hide your menu options.
.hidden {
display: none;
}
3) Re-work your JS function to dynamically add the hidden class when the box is checked. Since your menus are off by default, checking on naturally turns them on.
function showHide(e){
var menu = document.querySelector('div[data-menu="'+e.getAttribute('data-menu')+'"');
menu.classList.toggle('hidden');
}
Check out the below working snippet to see it in action.
function showHide(e){
var menu = document.querySelector('div[data-menu="'+e.getAttribute('data-menu')+'"');
menu.classList.toggle('hidden');
}
.hidden {
display: none;
}
<input data-menu="1" type="checkbox" name="area" id="chk" onclick="showHide(this);"/>
<label for="chk">Billing & Credit Management Systems</label>
<div class="hidden" data-menu="1">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div>
<input data-menu="2" type="checkbox" name="area" id="chk1" onclick="showHide(this);"/>
<label for="chk1">Customer Care Systems</label>
<div data-menu="2" class="hidden">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>

function showHide(element){
var chckbox = document.getElementById(element);
var hiddeninputs = document.getElementsByClassName(element);
for(var i=0; i !=hiddeninputs.length; i++){
if(chckbox.checked){
hiddeninputs[i].style.display ="block";
}
else{
hiddeninputs[i].style.display ="none";
}
}
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<input type="checkbox" name="area" id="chk" onclick="showHide(this.id);"/>
<label for="chk">Billing & Credit Management Systems</label>
<div class="chk">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div> <br>
<input type="checkbox" name="area" id="chk1" onclick="showHide(this.id);"/>
<label for="chk1">Customer Care Systems</label>
<div class="chk1">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>
</body>
</html>
try this this will work fine for you.

You're not using the parameter you're providing in the call of your function.
var chckbox = document.getElementById("chk");
will always find the first checkbox only to know if the other fields should be hidden or not and
var hiddeninputs = document.getElementsByClassName("hidden");
will allways hide all elements with class hidden. I think that
<input type="checkbox" name="area" id="chk" onclick="showHide(this);"/>
(i.e. change the parameter to the element rather than the .checked) in combination with
function showHide(elem){
var selector = "#" + elem.id + " ~ .hidden";
document.querySelector(selector).style.display = elem.checked ? 'block' : 'none';
}
will do more of what you want

call onchange function in input type checkbox
example
<input type="checkbox" name="area" id="chk" onchange="valueChanged(this.id)"/>Billing & Credit Management Systems
<input type="checkbox" name="area" id="chk1" onchange="valueChanged(this.id)"/> Customer Care Systems
<script type="text/javascript">
$(document).ready( function(){
$(".hidden").hide();
$(".hidden2").hide();
});
function valueChanged(id){
if(id== "chk"){
if($('#chk').is(":checked"))
$(".hidden").show();
else
$(".hidden").hide();
}
if(id== "chk1"){
if($('#chk1').is(":checked"))
$(".hidden2").show();
else
$(".hidden2").hide();
}
}
</script>
<div class="hidden">
<input type="radio" name="area1" /> <label> Web Billin g </label> <br />
<input type="radio" name="area1" /> <label> CRIBS </label> <br />
<input type="radio" name="area1" /> <label> PPC </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area1" placeholder="Please Specify"/></label><br /></label> <br />
</div>
<div class="hidden2">
<input type="radio" name="area1" /> <label> CRM (Customer Relationship) </label> <br />
<input type="radio" name="area1" /> <label> MVNO CRM </label> <br />
<input type="radio" name="area1" /> <label> Self-Care Site </label> <br />
<input type="radio" name="area1" /> <label> CMS (Trouble Ticketing) </label> <br />
<input type="radio" name="area1" /> <label> IRS </label> <br />
<input type="radio" name="area1" /> <label> Online Guide </label> <br />
<input type="radio" name="area1" /> <label> TMOS </label> <br />
<input type="radio" name="area1" /> <label> Others <input type="text" name="area2" placeholder="Please Specify"/></label><br /></label> <br />
</div>

how do I select a parameter a Javascript selector?

Hi there (I'm a complete JS newbie so please no bullying)
I'm trying to pass formID inside my score variable but I don't think I'm getting my selector right, can anyone tell me what I'm doing wrong ?
Edit: Sorry everyone, I'm getting tired. My issue: I cannot properly select the value of my score var.
JS
function addScore(formId) {
var show_id = $('#show_id-'+formId).val();
var user_id = $('#user_id-'+formId).val();
var score = $('input[value="tvshowrating' + formID +'"]').val();
HTML
<form id="40">
<div class="your-score">
<div class="">Your Score</div> <div id="flash"></div>
<input class="hover-star" type="radio" name="tvshowrating40" value="1" title="1" />
<input class="hover-star" type="radio" name="tvshowrating40" value="2" title="2" />
<input class="hover-star" type="radio" name="tvshowrating40" value="3" title="3" />
<input class="hover-star" type="radio" name="tvshowrating40" value="4" title="4" />
<input class="hover-star" type="radio" name="tvshowrating40" value="5" title="5" />
<input class="hover-star" type="radio" name="tvshowrating40" value="6" title="6" />
<input class="hover-star" type="radio" name="tvshowrating40" value="7" title="7" />
<input class="hover-star" type="radio" name="tvshowrating40" value="8" title="8" />
<input class="hover-star" type="radio" name="tvshowrating40" value="9" title="9" />
<input class="hover-star" type="radio" name="tvshowrating40" value="10" title="10" />
<input type="hidden" id="show_id-40" value="40" />
<input type="hidden" id="user_id-40" value="2" />
<span id="hover-test" style="margin:0 0 0 20px;"></span>
<input id="submitscore" type="submit" value="Submit scores!" onclick="addScore(40);" />
</div>
</form>
</div>

You probably want the checked value:
$('input[name="tvshowrating' + formID +'"]:checked').val()
Here is another question that answers your problem:
Get Value of Radio button group
or
How can I know which radio button is selected via jQuery?

You're selecting <input>s by value.
You probably want input[name=....

Checking checked in group radio buttons - validate

I have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
http://jsfiddle.net/jz84u/2/
How can i check if minimum one group is checked in this example? If no then should be alert('error').
I would like use jQuery.
$(".group").each(function(){
})
but how can i check this? For my example should be return error - any input is checked, but if i have:
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4" checked="checked">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
for this example is ok - input in second group is checked.
How can i validate this?

Will this fit your needs?
var n = $(".group input:checked").length;
if(n>0){do something}

Try like below it will work...
Add a button
<input type="button" value="check" id="btnCheck">
<div class="group">
<input type="radio" name="myradio" value="1">a
<input type="radio" name="myradio" value="2">b
</div>
<div class="group">
<input type="radio" name="two" value="3">a
<input type="radio" name="two" value="4">b
</div>
<div class="group">
<input type="radio" name="aaa" value="5">a
<input type="radio" name="aaa" value="6">b
</div>
write a jquery like below
$("#btnCheck").click(function() {
if($(".group input:radio:checked").val())
alert("checked");
else
alert("Nothing checked");
});
Fiddle : http://jsfiddle.net/jz84u/6/