Develop Reference

How to find which radio Button is selected after a div

How can I find which radio button is selected after a precise div?
This is an Example:
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
Here, when I click on the class .delete I would like to check (with jQuery) if one of the radio button below (inside the fieldset) has been selected. Do you have any hints?
Thanks in advance.

If there is just bunch of radio button you would like to check are checked or not you can do something like this
$(document).ready(function(){
$('.delete').on('click', function(){
$(document).find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
Ofc in line 3 you can specify more about the radio button location. For exp $(document).find('.largelines input[type=radio]') "OR" if you need to find radio butons based on delete button you can modify the code like this:
$(document).ready(function(){
$('.delete').on('click', function(){
var $parent = $(this).parents('.largelines');
$parent.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});
There is bunch of other ways to do that, another one is using next() or siblings() function:
$(document).ready(function(){
$('.delete').on('click', function(){
var $fieldset= $(this).next('fieldset');
//var $fieldset= $(this).siblings('fieldset');// i comment this out [its alternative way]
$fieldset.find('input[type=radio]').each(function(){
if($(this).get(0).checked){
//do something
}
});
});
});

This find only checked radio under .largelines scope of clicked .delete element.
$(function () {
$(document).on('click', '.delete', function () {
var isChecked = $('input:radio:checked', $(this).parent()).length > 0
alert(isChecked)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="largelines">
<p class="line">OPTION 1</p>
<div class="delete">
Check 1
</div>
<fieldset>
<input type="radio" id="option1" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option2" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>
<hr>
<div class="largelines">
<p class="line">OPTION 2</p>
<div class="delete">
Check 2
</div>
<fieldset>
<input type="radio" id="option21" name="option1" value="option1"><label for="option1">option1 </label><br>
<input type="radio" id="option22" name="option2" value="option2"><label for="option2">option2 </label>
</fieldset>
</div>

Show or Hide field when selected radio button codeigniter

I am currently doing a project. I have 2 radio button,1) One way 2) Round trip. When the user tried to select the One way radio button, the return text field will hide.
I've saw a thread and someone comment regarding to this problem. Scenario: I chose the One way radio button, the return field will disappear, yes it is working but there's some problem. What if I change my mind, from one way radio button to Round trip? The problem is the return field didn't came back
**View **
// my radio button
<div class="pure-u-1-1 radiobtn">
<form action="">
<input type="radio" name="flight_type" value="one_way" class="onew" style="" >One Way
<input type="radio" name="flight_type" class="roundw" style="" checked>Round Trip
</form>
</div>
// the return field that will hide/show
<div class="pure-u-1-1 dr" id="try">
<label for="return" class="drr">Return</label>
<input type="text" id="return" name="return" class="departreturn"><br>
</div>
JS
<script type="text/javascript">
$(document).on('change', 'input:radio[name=flight_type]', function(){
$('div[id^="try"]').hide(); // hide all DIVs begining with "my_radio_"
$('#' + $(this).attr('id') + '_text').show(); // show the current one
});
</script>

Just use .toggle()
.toggle()
Description: Display or hide the matched elements.
With no parameters, the .toggle() method simply toggles the visibility of elements:
REF: http://api.jquery.com/toggle/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pure-u-1-1 radiobtn">
<form action="">
<input type="radio" name="flight_type" value="one_way" class="onew" style="">One Way
<input type="radio" name="flight_type" class="roundw" style="" checked>Round Trip
</form>
</div>
<div class="pure-u-1-1 dr" id="try">
<label for="return" class="drr">Return</label>
<input type="text" id="return" name="return" class="departreturn"><br>
</div>
<script type="text/javascript">
$(document).on('change', 'input:radio[name=flight_type]', function() {
$('div[id^="try"]').toggle(); // toggle all DIVs begining with "my_radio_"
$('#' + $(this).attr('id') + '_text').show(); // show the current one
});
</script>

Disable all previous checkboxes except last one, enable preceding checkbox when other enabled

I've searched a while for this, but can't find a solution. Basically, I have a simple form, that will by dynamic (up to 20 cycles can exist for an ID). The validation to delete the Cycles, say that there are 3 of them, 1, 2, and 3, is that you can delete #3, but you cannot delete #2 until you delete #3, and you cannot delete #1 until you delete #2.
So, on the front-end, I was thinking of a design that would disable all but the last checkbox, then as you check the last checkbox, the next previous checkbox would be enabled and be able to be checked, and so on. Then, the user would delete (through a Bootbox modal submit button callback, which is even a bit trickier).
Here's a simple form I was using to test with:
<form class="form-horizontal" id="deleteCycles" action="/deleteCyclesScript" method="post">
<div class="col-md-12" style="margin-top: 30px; margin-bottom: 10px;">
<div class="checkbox"><label><input id="cycle1" type="checkbox" value="cycle1" class="dynamicCheckboxes">Cycle 1</label></div>
<div class="checkbox"><label><input id="cycle2" type="checkbox" value="cycle2" class="dynamicCheckboxes">Cycle 2</label></div>
<div class="checkbox"><label><input id="cycle3" type="checkbox" value="cycle3" class="dynamicCheckboxes">Cycle 3</label></div>
</div>
</form>
How can you dynamically write JavaScript (I'm using jQuery 1.12.4) to achieve this? I'm hoping to have something in the ID's that can almost make a chain of enabling the checkboxes -- the last one being enabled by default since it's not dependent on others to be deleted, but, then enabling the other checkboxes on the fly as the one above it is enabled.
Can anyone help with this?
Thanks so much!

So you can do this using jquery:
Initially set all but the last checkbox disabled
Use a checkbox listener that will:
a. enable the preceeding checkbox on ticking
b. disable all preceeding checkbox when unticking
See demo below:
// Initialize : disable all but the last checkbox
$('#deleteCycles .checkbox:last').prevAll().each(function() {
$(this).find('input').attr('disabled', 'disabled');
});
// checbox listener
$('#deleteCycles .checkbox input').change(function() {
if ($(this).is(":checked")) {
// enable the checkbox just above
$(this).closest('.checkbox').prev('.checkbox').find('input').removeAttr('disabled');
} else {
// disable all checkboxes preceeding
$(this).closest('.checkbox').prevAll().each(function() {
$(this).find('input').attr({
'disabled': 'disabled',
'checked': false
});
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal" id="deleteCycles" action="/deleteCyclesScript" method="post">
<div class="col-md-12" style="margin-top: 30px; margin-bottom: 10px;">
<div class="checkbox">
<label>
<input id="cycle1" type="checkbox" value="cycle1" class="dynamicCheckboxes">Cycle 1</label>
</div>
<div class="checkbox">
<label>
<input id="cycle2" type="checkbox" value="cycle2" class="dynamicCheckboxes">Cycle 2</label>
</div>
<div class="checkbox">
<label>
<input id="cycle3" type="checkbox" value="cycle3" class="dynamicCheckboxes">Cycle 3</label>
</div>
</div>
</form>

$(function () {
$(':checkbox').attr('disabled', true).each(function (index, element) {
$(this).data('index', index);
}).change(function () {
if($(this).is(':checked'))
{
$(this).parents('.checkbox:first').prev().find(':checkbox').attr('disabled', null);
}
else
{
$(this).parents('form:first').find(':checkbox:lt(' + $(this).data('index') + ')').attr('checked', false).attr('disabled', true);
}
}).last().attr('disabled', null);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form class="form-horizontal" id="deleteCycles" action="/deleteCyclesScript" method="post">
<div class="col-md-12" style="margin-top: 30px; margin-bottom: 10px;">
<div class="checkbox"><label><input id="cycle1" type="checkbox" value="cycle1" class="dynamicCheckboxes">Cycle 1</label></div>
<div class="checkbox"><label><input id="cycle2" type="checkbox" value="cycle2" class="dynamicCheckboxes">Cycle 2</label></div>
<div class="checkbox"><label><input id="cycle3" type="checkbox" value="cycle3" class="dynamicCheckboxes">Cycle 3</label></div>
</div>
</form>

Assuming sequential IDs, something like this might work.
Add a data-attribute that lets you reference the checkbox that the currently-active checkbox "depends on":
<form class="form-horizontal" id="deleteCycles" action="/deleteCyclesScript" method="post">
<div class="col-md-12" style="margin-top: 30px; margin-bottom: 10px;">
<div class="checkbox">
<label>
<input id="cycle1" type="checkbox" value="cycle1" class="dynamicCheckboxes" />
Cycle 1
</label>
</div>
<div class="checkbox">
<label>
<input id="cycle2" type="checkbox" value="cycle2" class="dynamicCheckboxes" data-dependsOn="#cycle1" />
Cycle 2
</label>
</div>
<div class="checkbox">
<label>
<input id="cycle3" type="checkbox" value="cycle3" class="dynamicCheckboxes" data-dependsOn="#cycle2" />
Cycle 3
</label>
</div>
</div>
</form>
Then, when the checkbox is toggled, check both it's checkstate and the "depends on" checkbox's checkstate:
$('.dynamicCheckboxes').on('change', function(e){
// hold reference to the current checkbox
var _this = $(this);
if(!_this.is(':checked')){
var dependsOn = _this.data('dependsOn');
if(dependsOn != ""){
if($(dependsOn).is(':checked')){
e.preventDefault();
// display some sort of error message
}
}
}
});
You could use the jQuery .prev function, as well, if your markup supports it (if the dependent checkbox always precedes the checkbox you're checking, in the markup).

how to remove form input data on clicking on checkbox?

If user is selecting file and after it if user is unchecking checkbox than file is also at there so I want to make it like a when user is unchecking checkbox than after file is must be remove. How can I make it? And which event handler is perfect for checkbox?
HTML CODE:
<div class="checkbox">
<label for="email">electronics
<input type="checkbox" name="product_category[]" value="electronics" id="product_category" class="electronics">
</label>
</div>
<div class="form-group" id="efileu" style="display:none;" >
<input type="file" name="checkboxfile0" id="efile" style="width:100%">
</div>
<div class="checkbox">
<label for="email">kitchen
<input type="checkbox" name="product_category[]" value="kitchen" id="product_category" class="kitchen">
</div>
<div class="form-group" id="kfileu" style="display:none;" >
<input type="file" name="checkboxfile1" id="kfile" style="width:100%">
</div>
<script>
$(".electronics").click(function(){
if(!$("#efileu").is(":visible")){
$("#efileu").show();
}
else{
$("#efileu").hide();
$("#efileu").val();
}
});
$(".kitchen").click(function(){
if(!$("#kfileu").is(":visible")){
$("#kfileu").show();
}
else{
$("#kfileu").hide();
}
});
</script>

use this one line of jQuery in your existing code that seems fine to me
else{
$("#efileu").hide();
$("#efileu").replaceWith($("#efileu").val('').clone(true)); //clear the values
}
else{
$("#kfileu").hide();
$("#kfileu").replaceWith($("#kfileu").val('').clone(true));//clear the values
}

Found a workaround that works:
$(".electronics").click(function() {
if (!$("#efileu").is(":visible")) {
$("#efileu").show();
} else {
var $el = $('#efileu');
$el.wrap('<form>').closest('form').get(0).reset();
$el.unwrap();
$("#efileu").hide();
}
Here's a JSFiddle to see it in action. Credit goes to Gyrocode.

jquery checkbox help getting checkbox name and value

The Problem
I am trying to run some ajax on one my pages for my website, basically I have three checkboxes all of which on pageload are unselected, when a checkbox is clicked I need to be able load in via ajax the relevant HTML. This system is currently a PHP script that depending on what the POST is set returns a different view, so I think all I need to is send the POST via AJAX, but I need to do everytime a new checkbox is checked.
My HTML looks like this,
div class="segment">
<div class="label">
<label>Choose region: </label>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Nationwide]" id="inp_Nationwide">
</div>
<div class="label ">
<label for="inp_Nationwide">Nationwide</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" checked="checked" class="radio checked" value="Y" name="area[Lancashire]" id="inp_Lancashire">
</div>
<div class="label ">
<label for="inp_Lancashire">Lancashire</label>
</div>
<div class="s"> </div>
</div>
</div>
<div class="column w190">
<div class="segment">
<div class="input">
<input type="checkbox" checked="checked" class="radio" value="Y" name="area[West_Yorkshire]" id="inp_West_Yorkshire">
</div>
<div class="label ">
<label for="inp_West_Yorkshire">West Yorkshire</label>
</div>
<div class="s"> </div>
</div>
<div class="s"> </div>
</div>
</div>
My current attempt was to ascertain whether the input has been clicked so I have done this with my javascript, though this is probably wrong,
$('input.radio').click(function(){
if($(this).hasClass('clicked')) {
$(this).removeClass('clicked');
} else {
$(this).addClass('clicked');
}
});

You can do
$('input.radio').change(function(){ // will trigger when the checked status changes
var checked = $(this).attr("checked"); // will return "checked" or false I think.
// Do whatever request you like with the checked status
});
Also, if you say
three checkboxes all of which on
pageload are unselected
They should have checked=""

$("input:checkbox:checked")
will return all checkboxes that are currently checked.
The event handler .change() will bind to whenever the input changes, so for radios/checkboxes, it binds to whenever they're toggled, so no need to use click().
$(".radio:checkbox").change(function() {
var boxChecked = $(this).is(":checked");
if(boxChecked) {
...do ajax...
}
});
But this is kind of sloppy too, considering you could use the toggle() method instead. Plus, are you wanting to destroy the html when they uncheck? Or is this a one time deal?

$('input:checkbox').bind('click', function(e){
switch(e.target.id){
case 'someid':{
if($(this).is(':checked')){
//ajax call here
}
break;
}
case 'anotherid':{
// something
break;
}
}
});
Actually, you could change the arragment in checking first if the element
is checked or unchecked and then switch through the id's.. hmm