Develop Reference

how to reverse selection with iCheck

I'm useing iCheck. Now i need to reverse selection when click on the reverse checkbox. I don't know how to do this. Has somebody done this before?
html
<input type="checkbox" id= "category_ids_select_reverse" name="category_ids_select_reverse">Reverse
<input type="checkbox" name="category_ids_select" value="">
js
var category_ids_select_reverse= $('#category_ids_select_reverse');
category_ids_select_reverse.on('ifChanged', function () {
// how to reverse the selection?
});

you can use iCheck('toggle')
$('#category_ids_select_reverse').on('ifClicked', function(){
$('input[name="category_ids_select"]').iCheck('toggle');
});
Sample : jsfiddle

category_ids_select_reverse.on('ifChanged', function () {
$('input[name="category_ids_select"]').each(function () {
if ($(this).prop('checked')) {
$(this).iCheck('uncheck');
} else {
$(this).iCheck('check');
}
});
});
The code above work fine for me. FYI

Enable/disable a button depending on checkboxes

I am trying since this morning to create a code using jQuery that allows to enable/disable a submit button when I click on a checkbox. I am trying to write all this code inside a function that will be called on everyclick.
The problem is that it works fine on JSFiddle, but on my computer one time the button is enabled I cannot make it disabled again by unchecking all checkboxes.
Do you have any idea to resolve this issue?
Thank you in advence.
This is my code:
function activeBouton() {
var countChecked = function() {
var n = $( "input:checked" ).length;
if (n == 0) jQuery('button').prop('disabled', true);
else jQuery('button').prop('disabled', false);
};
countChecked();
$( "input[type=checkbox]" ).on( "click", countChecked );
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div onclick="activeBouton()">
<input type="checkbox" name="nom" value="1" /> Item un
<input type="checkbox" name="nom" value="2" /> Item deux
<input type="checkbox" name="nom" value="3" /> Item trois
</div>
<button id="activeBtn" disabled>Add</button>

The snippet you shared is bit confusing. activeBouton function is attached with click handler of the div, which is calling countChecked() & this is also called if there is any change in checkbox
It can be simplified.
Beside in there is a major difference between LOAD TYPE like onLoad , onDOMReady,body & head in jsfiddle. So it will be helpful if it is possible to show where you are putting your code when you are running your code in browser
Hope this snippet will be useful
function countChecked() {
if ($('input[name="nom"]:checked').length > 0 && $("#activeBtn").is(':disabled')) {
$("#activeBtn").removeAttr('disabled')
} else if ($('input[name="nom"]:checked').length == 0) {
$("#activeBtn").attr('disabled', true)
}
};
$('input[name="nom"]').on("change", function(event) {
countChecked(); // Call countChecked event on change in checkbox
});
Check this jsfiddle

When I attempt to run your fiddle, I get the following error.
Uncaught ReferenceError: activeBouton is not defined.
Not sure why you are trying to bind a click event to the div with an onclick attribute, when you are already binding click events to the individual checkboxes with jQuery.
Try doing it this way instead:
$(document).ready(function() {
var countChecked = function() {
var n = $("input:checked").length;
if (n == 0) jQuery('button').prop('disabled', true);
else jQuery('button').prop('disabled', false);
};
$("input[type=checkbox]").on("click", countChecked);
});
And get rid of the onclick attribute on your surrounding <div>.
Updated fiddle.

Toggle spans inside an <a>

I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?

Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO

here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});

clear radio buttons when click on text input

I have a group of 4 radio buttons followed by a text input, when users click on the text input field I am trying to clear all radio inputs. here is my code so far.
<input type="radio" name="radio"><label for="radio1">1</label>
<input type="radio" name="radio"><label for="radio2">2</label>
<input type="radio" name="radio"><label for="radio3">3</label>
<input type="radio" name="radio"><label for="radio4">4</label>
<input type="text" id="textInput">
<script>
$('#textinput').click(function () {
radio.checked = false;
});
</script>

You can use .prop() to set checked property of input rabio buttons. Also you have misspelled textInput while event binding
<script>
$('#textInput').click(function () {
$('input[name="radio"]').prop("checked", false);
});
</script>
DEMO

<script>
$('#textInput').click(function () {
$('input[type=radio]').removeAttr("checked");
});
</script>

Or you can try attr() method
$('#textInput').click(function () {
$('input[name="radio"]').attr('checked',false);
});
DEMO

I think the best way to modify your script block (without changing your html) is first by ensuring that the code runs on document ready, and also you should probably ensure that the event is focus, not click, in case someone is using a keyboard or alternate navigation:
$(function() {
$('#textInput').focus(function () {
$('input[name=radio]').prop("checked", false);
});
});
Though it's probably more likely that you want to only clear other selections if they actually enter some data in that field, you might want to instead do:
$(function() {
$('#textInput').on('input', function () {
if($(this).val().length > 0) {
$('input[name=radio]').prop("checked", false);
}
});
});

change div text on radion button click

I want to put the radio button value in the status div. The text of status div should change, according to the radio button selected by the user.
The code that I used bellow is not working. Please help. Thanks!
HTML code:
<form action="">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female<br>
<div id="status"></div>
</form>​
JS code:
$(document).ready(function () {
RadioStatus="";
$("input[type='radio']:checked").each( function()
{
if ($(this).attr('checked');)
RadioStatus=$(this).val();
$("#status").text(RadioStatus);
});
$("input[type='radio']").change(function()
{
RadioStatus= $('input[type='radio']:checked').val()
$('#status').text(RadioStatus);
});
});

This should work:
$("input[type='radio']").click(function() {
$('#status').text($(this).val());
});

A few minor adjustments to your code got it to work just fine:
$(document).ready(function () {
RadioStatus="";
$("input[type='radio']:checked").each( function()
{
if ($(this).attr('checked'))
RadioStatus=$(this).val();
$("#status").text(RadioStatus);
});
$("input[type='radio']").change(function()
{
RadioStatus= $('input[type="radio"]:checked').val();
$('#status').text(RadioStatus);
});
});​
see: http://jsfiddle.net/f6Tru/
..or you can really simplify it by using techfoobar's:
$(document).ready(function () {
$("input[type='radio']").click(function() {
$('#status').text($(this).val());
});
});​
instead. see: http://jsfiddle.net/RrhYM/

You have a problem in your single quotes '
Change:
RadioStatus= $('input[type='radio']:checked').val()
To:
RadioStatus= $('input[type="radio"]:checked').val()

Try this code
$('input[name ^=sex]').click(function() {
$('#status').text($(this).val());
});

demo
$("input:radio").click(function() { //use $("input:radio[name='sex']").click if more radio buttons there
$('#status').text($(this).val());
});​

Simply use change to determine that a radio button is selected. Then use html or text to append the value of chosen radio button to your <div id="status">.
$(document).ready(function () {
$('input[type=radio]').on("change", function() {
$('#status').html($(this).val());
// Alternative
// $('#status').text($(this).val());
});
});​
DEMO

You may achieve that with the following JS code :
$("input").click(function(e){
var selectedValue = e.currentTarget.value;
$('#status').html(selectedValue );
});
​
​