i have two division tag one for maintain overflow content and another contain the check box
when i click any check box i just need to scroll bar depending up on the check box
i.e there is 20 check box, 9-10 are visible, if you want other then you have to scroll scroll bar, but i want functionality like when i click on 9 check box and the user want to go forward then 10 check box come up automatic. this functionality already provided in hot mail for selecting the mail.
for that one i have use following
<div>
<div id="text" style="width: 500px; height:200px; border: solid 1px grey; overflow: scroll;">
<input id="check1" type="checkbox" onclick="update(this.id)">Auto-scroll1<br>
<input id="check2" type="checkbox" onclick="update(this.id)">Auto-scroll2<br>
<input id="check3" type="checkbox" onclick="update(this.id)">Auto-scroll3<br>
<input id="check4" type="checkbox" onclick="update(this.id)">Auto-scroll4<br>
<input id="check5" type="checkbox" onclick="update(this.id)">Auto-scroll5<br>
<input id="check6" type="checkbox" onclick="update(this.id)">Auto-scroll6<br>
<input id="check7" type="checkbox" onclick="update(this.id)">Auto-scroll7<br>
<input id="check8" type="checkbox" onclick="update(this.id)">Auto-scroll8<br>
<input id="check9" type="checkbox" onclick="update(this.id)">Auto-scroll9<br>
<input id="check10" type="checkbox" onclick="update(this.id)">Auto-scroll10<br>
<input id="check11" type="checkbox" onclick="update(this.id)">Auto-scroll11<br>
<input id="check12" type="checkbox" onclick="update(this.id)">Auto-scroll12<br>
<input id="check13" type="checkbox" onclick="update(this.id)">Auto-scroll13<br>
<input id="check14" type="checkbox" onclick="update(this.id)">Auto-scroll14<br>
<input id="check15" type="checkbox" onclick="update(this.id)">Auto-scroll15<br>
<input id="check16" type="checkbox" onclick="update(this.id)">Auto-scroll16<br>
<input id="check17" type="checkbox" onclick="update(this.id)">Auto-scroll17<br>
<input id="check18" type="checkbox" onclick="update(this.id)">Auto-scroll18<br>
<input id="check19" type="checkbox" onclick="update(this.id)">Auto-scroll19<br>
<input id="check20" type="checkbox" onclick="update(this.id)">Auto-scroll20<br>
<script type="text/javascript">
function update(checkID) {
var box = document.getElementById("checkID");
var tag = document.getElementById("text");
tag.scrollTop = tag.scrollTop - 17;
setTimeout('update(checkID)', 1000);
}
</script>
</div>
</div>
how to scroll scroll bar when user select check box from the list
and also if user selecting forward than scroll down or user select backward than scroll up as per the user requirement
please help me
thanks in advance ...
I think i did what you want. You will need jQuery for this.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="text" style="width:500px;height:200px;border:solid 1px grey;overflow:scroll;">
<input type="checkbox" />Auto-scroll1<br/>
<input type="checkbox" />Auto-scroll2<br/>
<input type="checkbox" />Auto-scroll3<br/>
<input type="checkbox" />Auto-scroll4<br/>
<input type="checkbox" />Auto-scroll5<br/>
<input type="checkbox" />Auto-scroll6<br/>
<input type="checkbox" />Auto-scroll7<br/>
<input type="checkbox" />Auto-scroll8<br/>
<input type="checkbox" />Auto-scroll9<br/>
<input type="checkbox" />Auto-scroll10<br/>
<input type="checkbox" />Auto-scroll11<br/>
<input type="checkbox" />Auto-scroll12<br/>
<input type="checkbox" />Auto-scroll13<br/>
<input type="checkbox" />Auto-scroll14<br/>
<input type="checkbox" />Auto-scroll15<br/>
<input type="checkbox" />Auto-scroll16<br/>
<input type="checkbox" />Auto-scroll17<br/>
<input type="checkbox" />Auto-scroll18<br/>
<input type="checkbox" />Auto-scroll19<br/>
<input type="checkbox" />Auto-scroll20<br/>
</div>
<script type="text/javascript">
$(function() {
var ct = $('#text'),
cboxes = $('input[type="checkbox"]', ct),
lastChecked = null;
cboxes.click(function() {
if (!lastChecked)
lastChecked = this;
var _current = $(this),
_last = $(lastChecked),
cindex = cboxes.index(_current),
lindex = cboxes.index(_last),
t = null;
//next
if (cindex >= lindex) {
t = $(cboxes[cindex + 1]);
if (t) ct.animate({ scrollTop: ct.scrollTop() + t.height() * 1.5 }, 500);
//prev
} else if (cindex < lindex) {
t = $(cboxes[cindex - 1]);
if (t) ct.animate({ scrollTop: ct.scrollTop() - t.height() * 1.5 }, 500);
}
lastChecked = this;
});
});
</script>
see this
Related
if($('#yes').prop('checked')){
$('#phone-num').show();
}else{
$('#phone-num').hide();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />
You need in order to do that to listen to the click on your checkbox.
You code - as you did it - only execute itself one time at the loading of the page.
In the snippet below, a listener is added to the checkbox and is triggered every time you click on it.
$('#yes').click(function() {
var isChecked = $(this).prop('checked');
if (isChecked) {
$('#phone-num').show();
} else {
$('#phone-num').hide();
}
});
#phone-num {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="yes"> Phone Me concerning this case: </label>
<input type="checkbox" name="phone_me" id="yes" />
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />
Add a listener for the checkbox change.
If you don't want the checkbox to be visible the first time, you can add a style with display:none to hide it.
$('#yes').change(
function(){
//console.log("check if checked!");
if ($(this).is(':checked')) {
$('#phone-num').show();
}
else
{
$('#phone-num').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" style="display:none;" />
You can hide the input by default, then add an on click handler to the check box and toggle visibility
$(function() {
$(document).on('click', '#yes', function() {
$('#phone-num').toggle();
});
});
#phone-num {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for=" yes"> Phone Me concerning this case:<input type="checkbox" name="phone_me" id="yes" /></label>
<label for="yes"> Yes</label>
<input type="text" name="phone_num" id="phone-num" />
I am using this script to check and uncheck all checkboxes:
$('#checkall').click(function () {
var checked = $(this).data('checked');
$('.chkall').find(':checkbox').attr('checked', !checked);
$(this).data('checked', !checked);
});
It works great, but as soon as I uncheck several checked checkboxes after "check all" and then hit "uncheck all" and "check all" again, those previously unchecked checkboxes are not checked again. Help would be great! Thank you very much!
This might be the correct way..
Use prop instead of attr and group the checkbox list inside a div, just for organizing purposes. Also use the checked as it is, don't negate it.
$(document).ready(function() {
$('#checkall').click(function() {
var checked = $(this).prop('checked');
$('#checkboxes').find('input:checkbox').prop('checked', checked);
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">check / uncheck all</label>
<br/>
<br/>
<div id="checkboxes">
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />
</div>
$('#checkall').click(function(){
var d = $(this).data(); // access the data object of the button
$(':checkbox').prop('checked', !d.checked); // set all checkboxes 'checked' property using '.prop()'
d.checked = !d.checked; // set the new 'checked' opposite value to the button's data object
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='checkall' data-checked='false'>check/uncheck all</button>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
<input type=checkbox>
I guessed what your HTML looks like, in terms of the triggering button, but what I don't know is how you initially set the data on it. hope this is the way you have it coded. if not, please tell.
You simply need to get all checkboxes and check them all.
$('#checkall').click(function() {
var _this = this;
$('#checkboxes').find('input[name="checkAll"]').each(function() {
if ($(_this).is(':checked')) {
$(this).prop('checked', true);
} else {
$(this).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="checkall" />
<label for="checkall">check / uncheck all</label>
<br/>
<br/>
<div id="checkboxes" class=".chkall">
<input type="checkbox" name="checkAll"/>
<input type="checkbox" name="checkAll"/>
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
<input type="checkbox" name="checkAll" />
</div>
I have 5 if else conditions under function getRadioButtonValue. The function does not go through all the conditions even after clicking the right button combinations.
I have tried to debug the script using Chrome Developer tools but the problem still exists. Where is the code breaking?
Some information regarding the page, I am using Javascript to hide the div's and headers so that at any one time there is only one question seen.
Only the first if conditions work, but nothing else
The results are seen after Get Result button is clicked on the last page which should redirect to the appropriate page.
[DELETED CODE]
[UPDATED CODE]
I am unable to auto hide my div's based on the response given below by Keith.
FYI: His code works as expected.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.hidden {
display: none;
}
.visible {
display: block;
margin: 0 auto;
width: 650px;
height: 445px;
background: #EFDFBC;
}
</style>
</head>
<body>
<div id="first-question" class="visible">
<h3>How?</h3>
<ul>
<li>abc</li>
<li>def</li>
</ul>
<hr>
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
</div>
<div id="second-question" class="hidden">
<h3>To</h3>
<hr>
<input type="radio" name="quiz-question-two" id="quiz-question-two-yes" value="yes" />
<label for="quiz-question-two-yes" id="twoYes">Yes</label>
<input type="radio" name="quiz-question-two" id="quiz-question-two-no" value="no" />
<label for="quiz-question-two-yes" id="twoNo">No</label>
</div>
<div id="third-question" class="hidden">
<h3>Make </h3>
<hr>
<input type="radio" name="quiz-question-three" id="quiz-question-three-yes" value="yes" />
<label for="quiz-question-three-yes" id="threeYes">Yes</label>
<input type="radio" name="quiz-question-three" id="quiz-question-three-no" value="no" />
<label for="quiz-question-three-yes" id="threeNo">No</label>
</div>
<div id="fourth-question" class="hidden">
<h3>This</h3>
<hr>
<input type="radio" name="quiz-question-four" id="quiz-question-four-yes" value="yes" />
<label for="quiz-question-four-yes" id="fourYes">Yes</label>
<input type="radio" name="quiz-question-four" id="quiz-question-four-no" value="no" />
<label for="quiz-question-four-yes" id="fourNo">No</label>
</div>
<div id="fifth-question" class="hidden">
<h3>Work?</h3>
<hr>
<input type="radio" name="quiz-question-five-yes" id="quiz-question-five-yes" value="yes" />
<label for="quiz-question-five-yes" id="fiveYes">Yes</label>
<input type="radio" name="quiz-question-five-no" id="quiz-question-five-no" value="no" />
<label for="quiz-question-five-yes" id="fiveNo">No</label>
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
</body>
</html>
<script type="text/javascript">
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.quiz-question-one && r.quiz-question-two && r.quiz-question-three && r.quiz-question-four && r.quiz-question-five) {
rt.text('All Yes');
} else if (!r.quiz-question-one && !r.quiz-question-two && !r.quiz-question-three && !r.quiz-question-four && !r.quiz-question-five) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.hidden'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('visible');
next_page.addClass('visible');
if (next_page.hasClass('result')) updateResult();
});
});
</script>
I've created an example below that I think you can work from. The values from the radio I don't think get updated until you submit, instead I've captured the results in the onclick. You can now add back you CSS styling etc. Hope that helps.
var results = {};
function updateResult() {
var r = results,
rt = $('#result');
if (r.q1 && r.q2 && r.q3) {
rt.text('All Yes');
} else if (!r.q1 && !r.q2 && !r.q3) {
rt.text('All No');
} else {
rt.text('We have a mixed response');
}
}
$(function () {
$('body').on('click', '[name]', function () {
var $this = $(this),
page = $this.closest('.page'),
next_page = $(page.next());
results[$this.attr('name')] = $(this).val() === 'yes';
page.removeClass('active');
next_page.addClass('active');
if (next_page.hasClass('result')) updateResult();
});
});
.page {
display: none;
}
.page.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page active">
<div>Question 1</div>
<label for="q1yes">Yes</label>
<input id="q1yes" type="radio" name="q1" value="yes">
<label for="q1no">No</label>
<input id="q1no" type="radio" name="q1" value="no">
</div>
<div class="page">
<div>Question 2</div>
<label for="q2yes">Yes</label>
<input id="q2yes" type="radio" name="q2" value="yes">
<label for="q2no">No</label>
<input id="q2no" type="radio" name="q2" value="no">
</div>
<div class="page">
<div>Question 3</div>
<label for="q3yes">Yes</label>
<input id="q3yes" type="radio" name="q3" value="yes">
<label for="q3no">No</label>
<input id="q3no" type="radio" name="q3" value="no">
</div>
<div class="page result">
<label>Results</label>
<div id="result"></div>
</div>
<input type="radio" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
In the above you are using type="radio", that means all type="radio" with the same name will group together, and not just these two. To group together just give them a name on the input. eg.
<input type="radio" name="quiz-question-one" id="quiz-question-one-yes" value="yes" />
<label for="quiz-question-one-yes" id="oneYes">Yes</label>
<input type="radio" name="quiz-question-one" id="quiz-question-one-no" value="no" />
<label for="quiz-question-one-no" id="oneNo">No</label>
Above you can see I've given the 2 inputs the name="quiz-question-one", and then for the next question maybe give them a name="quiz-question-two" etc..
On another note, there are lots of places where your code could be simplified, but hopefully this will solve your current problem.
The issue is:
I have four radio buttons and a check box.
Two radio buttons are with one name and two with another.
The last radio buttons with same name appear only when the check box is checked.
What I want is add the value of first radio button and the value of radio button that appears after the checkbox is checked.
So how do I total the two values using javascript or any other technique. I need it asap as I am working on a project. I need that to be done as in a shopping cart. It means if the user selects another radio button then the value of earlier one should be subtracted and the value of new one added.
<script>
// get list of radio buttons with name 'size'
var sz = document.forms['de'].elements['type'];
// loop through list
for (var i=0, len=sz.length; i<len; i++) {
sz[i].onclick = function() { // assign onclick handler function to each
// put clicked radio button's value in total field
var m=this.form.elements.total.value = this.value;
};
}
var sa = document.forms['de'].elements['glass'];
// loop through list
for (var i=0, len=sa.length; i<len; i++) {
sa[i].onclick = function() { // assign onclick handler function to each
// put clicked radio button's value in total field
var n=this.form.elements.total1.value = this.value;
};
}
$(document).ready(function () {
$('.a').hide();
$('#checkb').click(function () {
var $this = $(this);
if ($this.is(':checked')) {
$('.a').show();
} else {
$('.a').hide();
}
});
});
</script>
<form action="sum.php" method="post" name="de">
<fieldset>
<table align="center">
<tr><td align="center" colspan="100sp"><label><input type="radio" name="type" value="200" />Ordinary (Rs. 200)</label>
<tr><td align="center" colspan="100sp"><label><input type="radio" name="type" value="500" />Original (Rs. 500)</label>
<tr><td colspan="100sp"><label>Do You want a screen guard or a tempered glass?</label><input type="checkbox" name="screen" value="yes" id="checkb" />
<tr><td align="center" colspan="100sp"><label class="a"><input type="radio" class="a" name="glass" value="100" />Screen Guard (Rs. 100)</label>
<tr><td align="center" colspan="100sp"><label class="a"><input type="radio" class="a" name="glass" value="200" />Tempered Glass (Rs. 200)</label>
</table>
<p><label>Repair: Rs. <input type="text" name="total" value="0" readonly="readonly" /></label></p>
<p><label>Glass: Rs. <input type="text" name="total1" value="0" readonly="readonly" /></label></p>
<p><label>Total: Rs. <input type="text" name="total2" value="0" readonly="readonly" /></label></p>
</fieldset>
</form>
You can do this with the Jquery event Change(). I have added ID names to the input text elements and this Jquery lines:
Check the comments for each line.
$(document).ready(function() {
//HIDE AND SHOW EXTRA OPTIONS
$('.a').hide();
$('#checkb').change(function() {
$('.a').toggle();
});
//CHECK WHEN ANY RADIO INPUT CHANGES
$('fieldset').on('change','input[type=radio]',function(){
//Get the Value and wich field text will change
var value = $(this).attr('value'),
target = $(this).attr('name');
$('#'+target).val(value);
//Show the total
var total = parseInt($('#type').val(),10) + parseInt($('#glass').val(),10);
$('#total').val(total);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<fieldset>
<label>
<input type="radio" name="type" value="200" />Ordinary (Rs. 200)</label>
<br>
<label>
<input type="radio" name="type" value="500" />Original (Rs. 500)</label>
<br>
<input type="checkbox" name="screen" value="yes" id="checkb" />
<label>Do You want a screen guard or a tempered glass?</label>
<br>
<label class="a">
<input type="radio" class="a" name="glass" value="100" />Screen Guard (Rs. 100)</label>
<br>
<label class="a">
<input type="radio" class="a" name="glass" value="200" />Tempered Glass (Rs. 200)</label>
<br>
<p>
<label>Repair: Rs.
<input type="text" id="type" name="total" value="0" readonly="readonly" />
</label>
</p>
<p>
<label>Glass: Rs.
<input type="text" id="glass" name="total1" value="0" readonly="readonly" />
</label>
</p>
<p>
<label>Total: Rs.
<input type="text" id="total" name="total2" value="0" readonly="readonly" />
</label>
</p>
</fieldset>
</form>
You can do it by using a facility given by jquery. Please check the below code
<input type="radio" class="myradio" name="radio" id="r1" data-value="test1"/>
<input type="radio" class="myradio" name="radio" id="r1" data-value="test1"/>
<script type="text/javascript">
var total = 0;
$('.myradio').on('click',function(){
//Here you can get the checkbox value from data-value attribute
alert($(this).data('value');
//Total the Values
total = total + $(this).data('value');
});
</script>
In above code you can easily get the data from checkbox when it is clicked...
The user has to select one radio from each of three input "categories". If he "submits" without doing so, he gets a warning:
http://jsfiddle.net/bqyvS/
Markup like this:
<form>
<div id="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>
Javascript:
$('#link').on('click', function() {
if (!$('#color input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a color!");
}
else if(!$('#shape input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a shape!");
}
else if(!$('#size input[type=radio]:checked').length) {
$('#warning').text("Oops! Please choose a size!");
}
});
This is a simplified version of a larger piece of code. How can I rewrite the conditional more efficiently so that I'm not verbosely checking each input name? (There should only be one "warning" displayed per "submit", even if multiple input name categories aren't checked.) Editing the markup would be okay.
Thanks!
When applying behavior to similar groups, you should start thinking about classes instead of ids, in this solution, you don't need a separate data-name but I believe it's better to have data separate from html id, but you could use this.id if you prefer
<form>
<div id="color" class="selection-group" data-name="color">
<input type="radio" name="color" id="blue">
<label for="blue">Blue</label>
<input type="radio" name="color" id="red">
<label for="red">Red</label>
<input type="radio" name="color" id="green">
<label for="green">Green</label>
</div>
<div id="shape" class="selection-group" data-name="square">
<input type="radio" name="shape" id="square">
<label for="square">Square</label>
<input type="radio" name="shape" id="circle">
<label for="circle">Circle</label>
<input type="radio" name="shape" id="triangle">
<label for="triangle">Triangle</label>
</div>
<div id="size" class="selection-group" data-name="size">
<input type="radio" name="size" id="small">
<label for="small">Small</label>
<input type="radio" name="size" id="medium">
<label for="mediume">Medium</label>
<input type="radio" name="size" id="large">
<label for="large">Large</label>
</div>
</form>
<a id="link" href="#">click me to "submit"</a>
<p id="warning"></p>
Javascript:
$('#link').on('click', function() {
$('.selection-group').each(function() {
if(!$(this).find('input[type=radio]:checked').length) {
$('#warning').html("Oops! Please choose a "+ $(this).data('name') +"!");
return false;
}
});
});
function validationCheck() {
var isValid = true,
errorText = "";
$("form div").each( //get the divs that hold the radios and loop
//$("#color, #shape, #size").each( //could do it by ids of the divs also
function(){
var div = jQuery(this), //div reference
isChecked = div.find('input[type="radio"]:checked').length>0; //see if we have anything selected
if (!isChecked) { //if no selections, show error message
isValid = false; //set validation to false
errorText = "Oops! Please choose a " + div.prop("id") + "!"; //build error message
return false; //exit each loop
}
}
);
$('#warning').text(errorText); //set error message
return isValid;
}
$('#link').on('click', function(){
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
$('#warning').text("Oops! Please choose a " + this.id + "!");
});
});
jsFiddle
You may want to consider generating a warning message in the case a user does not select any inputs or only 1 input.
In this example, a user will recieve a message similar to Oops! Please choose a color, and shape!
$('#link').on('click', function(){
var msgs = [];
$('#color, #shape, #size').each(function(i, ele){
if($(this).find('input:checked').length == 0)
msgs.push(this.id);
});
if(msgs.length > 0)
$('#warning').text("Oops! Please choose a " + msgs.join(", and "));
});
jsFiddle