We Keep Coding

Checkbox acting like radio button | Using icheck.js

I have created three checkboxes as follows:
<input type="checkbox" name="upgrade">
<input type="checkbox" name="upgrade">
<input type="checkbox" name="upgrade">
I want these checkboxes to act like radio buttons and using the following jQuery, I am nearly achieving this. I am also using the icheck.js library, so I am doing the jQuery code like this:
$('input[type="checkbox"]').on('ifChanged', function() {
$('input[name="' + this.name + '"]').not(this).iCheck('uncheck');
});
However this is only working with the first change, as soon as I click the third time it doesn't work any longer. Can anyone tell me what I am doing wrong ?

I can not use Icheck plugin but I did with standart checkbox.
$('input[type="checkbox"]').click( function(){
if( $(this).is(':checked') ){
$('input[type="checkbox"]').prop('checked',false);
$(this).prop('checked',true);
}
else {
$(this).prop('checked',true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="upgrade" checked>
<input type="checkbox" name="upgrade">
<input type="checkbox" name="upgrade">

Base on a previous answer, there's no reason for the if statement inside.. this solution will remove all checked, then check the appropriate selection right after.
HTML:
<input type="checkbox" name="upgrade">
<input type="checkbox" name="upgrade">
<input type="checkbox" name="upgrade">
JS:
$('input[type="checkbox"]').click( function(){
$('input[type="checkbox"]').prop('checked',false);
$(this).prop('checked',true);
});
https://jsbin.com/qeqemuqaci/edit?html,js,output

Make a checkbox unchecked when it is hidden using JavaScript

I have a JavaScript function in place for a multiple choice quiz:
If the answer is 'Yes' - (checked by a checkbox) - Then a sub-question will appear, but if the user clicks 'No' the sub-question won't appear.
JavaScript
$(document).ready(function() {
var par = $('#SQ1');
$(par).hide();
$('#Q1').click(function(e) {
$(par).slideToggle('slow');
});
});
$(document).ready(function(){
$('#Q1NO').click(function(){
$('#SQ1').hide('slow');
});
})
Questions checkboxes
<div>
<input type="checkbox" id="Q1" name="chk[]" value="Yes"> Yes</input>
<br>
<input type="checkbox" id="Q1NO" name="chk[]" value="No"> No</input>
</div>
Sub-Question checkboxes
<div id="SQ1">
<div>
<input type="checkbox" name="chk[]" value="Yes 2" id="Q1R"> Yes</input>
<br>
<input type="checkbox" name="chk[]" value="No 2"> No</input>
</div>
</div>
I am inputting the values from the checkboxes into a database and the problem is that if the user clicked 'Yes' and then selected a box from the sub-question, but then changed their mind and clicked 'No' on the primary question, the sub-question will disappear, but the box is still checked inside it and it gets added to the database - Which I don't want.
Is there a way to uncheck an item within a div, on the click of the 'No' from the first div?
Thanks for reading

Uncheck all subquestions checkboxes:
$('#Q1NO').click(function(){
$('#SQ1').hide('slow')
.find('input:checkbox').prop('checked',false);
});

First of all there either should be radio button for Yes/no or only one checkbox. There are several ways to achieve your requirement. I have posted below easiest one. See if it helps.
function showHideSub(isChecked){
if(isChecked)
{
$("#sub").show()
}
else
{
$("#sub").hide()
$("#sub input[type=checkbox]").removeAttr("checked");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<input type="checkbox" id="Q1" name="chk[]" onclick="showHideSub(this.checked)" value="Yes"> Yes / No </input>
<br>
</div>
<div id="sub" style="display:none">
<input type="checkbox" name="chk[]" value="Yes 2" id="Q1R"> Yes/No</input>
</div>

Solution without loop as you can set properties on all query matches.
$('#Q1NO').click(function() {
par.hide('slow');
par.find("input[type=checkbox]").prop('checked', false);
});

Displaying particular values on radio select

I'm trying to display particular forms on the selection of particular radio buttons.
Here are the radio buttons :-
<input type="radio" name="condition" value="working" id="condition">
<input type="radio" name="condition" value="workingdamaged" id="condition">
<input type="radio" name="condition" value="notworking" id="condition">
When we select the working radio, a different form needs to be opened up. When we select nonworking a different form needs to be there.
Originally, I was doing it via document.getElementById("demo").innerHTML , but, I was suggested that using too much forms within the innerHTML is not a good idea.
Then what is the best way by which I complete this task?
Any suggestions are welcome.

The simplest way I can think of is using data attributes for referring to the corresponding form elements from the radio button selected.
All we have to do is map a radio button with 'data-form="working"' to a particular form with id 'working'
The sample code looks like:
$("form").hide();
$("input:radio").on("change", function() {
$("form").hide();
$("#" + $(this).attr("data-form") ).show();
});
The html markup should look like:
<input type="radio" data-form="working" value="working" name="condition">
<input type="radio" data-form="workingdamaged" value="workingdamaged" name="condition">
<input type="radio" data-form="notworking" value="notworking" name="condition">
<form id="working">
<h2>working form</h2>
</form>
<form id="workingdamaged">
<h2>workingdamaged form</h2>
</form>
<form id="notworking">
<h2>notworking form</h2>
</form>
Fiddle Demo

Your solution is fine and I don't see any major problems with it.
You can also add all forms to DOM, and switch their visibility.
For instance:
<form id="form-working" style="display: none"></form>
<form id="form-workingdamaged" style="display: none"></form>
<form id="form-notworking" style="display: none"></form>
<input type="radio" name="condition" value="working" id="condition-working">
<input type="radio" name="condition" value="workingdamaged" id="condition-workingdamaged">
<input type="radio" name="condition" value="notworking" id="condition-notworking">
<script>
var forms = ['working', 'workingdamaged', 'notworking'];
function switch(form) {
for (var k in forms) {
forms[k].style.display = 'none';
}
document.getElementById('form-' + name).style.display = 'block';
}
var elements = document.getElementsByName('condition');
for (var k in elements) {
elements[k].onclick = function() {
if (this.cheked) {
switch(this.getAttribute('value'));
}
}
}
</script>
EDIT: you have to change IDs of the elements. ID must be unique
Also you may consider using or external libraries for templating.

You may take a look at this question. It might serves your purpose.
Show form on radio button select

<input type="radio" name="condition" class="selectradio" value="working" selection="select1">
<input type="radio" name="condition" class="selectradio" value="workingdamaged" selection="select2">
<input type="radio" name="condition" class="selectradio" value="notworking" selection="select3">
give them different ids this
create a model like this .
<div class=content>
<div class="subcontent" style="display:none" id="select1">//content</div>
<div class="subcontent" style="display:none" id="select2">//content</div>
<div class="subcontent" style="display:none" id="select3">//content</div>
</div>
<script>
$(function(){
$('.selectradio').change(
function(){
var sourced=$(this).attr("selection") ;
$(".subcontent").hide();
$("#"+sourced).show();
}
);
});
</script>
you have to include jquery library .

JS / JQuery - Trouble with getting checkbox values

I have many checkboxes in a dynamically produced (ASP) photo gallery. Each checkbox has the name 'photos' and contains a photo ID in the value, like this:
<form name="selectForm" id="selectForm">
<input type="checkbox" onclick="selectPhoto(<%=rs1.Fields("photoID")%>)" id="checkbox_<%=rs1.Fields("photoID")%>" class="photos" name="photos" value="<%=rs1.Fields("photoID")%>">
</form>
Without submitting a form, when the user clicks the checkbox, I need to create a comma (,) separated list of all the checked values for the checkbox named 'photos'. So this is what I tested but it alerts 'undefined'! The ASP is correct, for those not familiar with it.
function selectPhoto(id) {
... other stuff that uses id ...
var allValues = document.selectForm.photos.value;
alert(allValues);
}
But as I said above, this returns 'undefined' and I can work out why. When a user selects a photo, I simply need to display a list of all the photo ID's that have been clicked e.g. 1283,1284,1285,1286...
Any ideas what I am doing wrong here? Or is there another way to achieve this?

Try this:
var allValues = [];
$('input.photos').each(function(){
allValues.push($(this).val());
});
alert(allValues.join(','));

I believe that the problem comes from the fact that "document.selectForm.photos" is not an input but an array. I have some code for you that worked:
<script>
function selectPhoto(id) {
var allCheckbox = document.selectForm.photos;
var allValues = []
for (var i=0; i<allCheckbox.length; i++){
if (allCheckbox[i].checked){
allValues.push(allCheckbox[i].value)
}
}
alert( allValues.join(',') )
}
</script>
<form name="selectForm" id="selectForm">
<input type="checkbox" onclick="selectPhoto(1)" id="checkbox_1" class="photos" name="photos" value="1">
<input type="checkbox" onclick="selectPhoto(2)" id="checkbox_2" class="photos" name="photos" value="2">
<input type="checkbox" onclick="selectPhoto(3)" id="checkbox_3" class="photos" name="photos" value="3">
<input type="checkbox" onclick="selectPhoto(4)" id="checkbox_4" class="photos" name="photos" value="4">
<input type="checkbox" onclick="selectPhoto(5)" id="checkbox_5" class="photos" name="photos" value="5">
</form>

Jquery watch certain fields for certain values

I have some test code here
<input type="radio" name="group1">1
<input type="radio" name="group1">2
<input type="radio" name="group1">3
<br>
<input type="text" name="text1">
<br>
<input type="radio" name="group2">1
<input type="radio" name="group2">2
<input type="radio" name="group2">3
<br>
<input disabled type="submit">
Please can you tell me if there is a way to watch multiple fields so that if their values changes i can enable a button..
So in short instead of having 3 .change rules watching each other... can't i do one piece of code that watches all 3 and if the values equals a particular something it enables the submit button ?
Thanks
Lee

$(':radio').change(function() {
if ($(this).attr('name') == 'group2')
$(':submit').removeAttr('disabled');
});

You can use the click event hander. For e.g.:
$(":radio[name='group1'],:radio[name='group2'],:radio[name='group3']").live("click",function(){
//do something
});

if i correct understood ur question, here it is:
set classes (for less JS code):
<input type="radio" class="g1-1" name="group1">1
<input type="radio" class="g1-2" name="group1">2
<input type="radio" class="g1-3" name="group1">3
<br>
<input type="text" class="text" name="text1">
<br>
<input type="radio" class="g2-1" name="group2">1
<input type="radio" class="g2-2" name="group2">2
<input type="radio" class="g2-3" name="group2">3
<br>
<input disabled type="submit">
JS:
$(function(){
$('input').click( function(){
if ( ($('.g1-2').is(':checked')) && ($('.g2-1').is(':checked')) && ($('.text').val()=="ok" ))
{
// event
}
});
});

Sounds like a candidate for http://knockoutjs.com/ - You associate DOM elements with a client-side view model. When the data model's state changes, the UI updates automatically.

If your jQuery selector matches more than one element, when you bind a callback function to an event, that function will be bound to all the elements the selector matches.
Example:
$('input[type="radio"]').change(function() {
$('body').append('changed');
});
See a working fiddle here