I have a couple of checkboxes. When one checkbox is selected, next to that checkbox a div with a message (a div with the class .feedback) should appear. This works, using next(). But when two or three checkboxes are selected next to the checked checkboxes (including the first one) a button should appear. When a checkbox is unchecked again, the button next to that checkbox should disappear again. When only one is left, the message should appear again.
I can either get it to show a button next to all checkboxes, but not next to the checked ones.
JSBIN can be found here: http://jsbin.com/egutaj/1/edit
try this
HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<form action="#" name="form">
<div>
<input type="checkbox" name="test[]" value="1" class="selectie" />
<div class="feedback"></div>
<input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>
<input type="checkbox" name="test[]" value="2" class="selectie" />
<div class="feedback"></div>
<input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>
<input type="checkbox" name="test[]" value="3" class="selectie" />
<div class="feedback"></div>
<input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>
<input type="checkbox" name="test[]" value="4" class="selectie" />
<div class="feedback"></div>
<input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
<div>
<input type="checkbox" name="test[]" value="5" class="selectie" />
<div class="feedback"></div>
<input type="submit" class="button" value="Compare" name="submit" style="display:none;" />
</div>
</form>
<body>
</body>
</html>
CSS
.feedback
{
display:none;
padding:10px;
}
.button
{
display:block
padding:10px;
}
jQuery
var countChecked = function()
{
var n = $('input:checked').length;
if(n === 0)
{
$('.feedback').hide();
$('.button').hide();
$('.selectie').removeAttr('disabled');
}
else if(n == 1)
{
$('.feedback').text("Add 1 or 2 to compare");
$('.selectie').removeAttr('disabled');
$('.button').hide();
$(".selectie").each(function(){
if($(this).is(':checked'))
{
$(this).next('.feedback').show();
}
else
{
$(this).next('.feedback').hide();
}
});
}
else if(n >= 2)
{
$('.selectie').removeAttr('disabled');
$('.feedback').hide();
$(".selectie").each(function(){
if($(this).is(':checked'))
{
$(this).next('.feedback').next('.button').show();
}
else
{
$(this).next('.feedback').next('.button').hide();
}
});
}
};
countChecked();
$( "input[type=checkbox]" ).on( "click", countChecked );
live demo here
You'll need to use the jQuery.each () function to iterate through the checkboxes, showing or hiding its siblings as necessary.
Related
I try to clone a section after another section on user input (clicking a radio button), but it doesn’t works...
your help is appreciated.
<section class="clonetester">
<input id="1a" type="radio" value="1" name="q1">yes
<input id="1b" type="radio" value="0" name="q1" >no
<br />
<input id="date1" type="datetime-local" name="date" />date<br />
</section>
<section class="here">clone follows</section>
<script>
$('input').click(function(e){
$('#1a').(':checked'){
$('.clonetester').clone().appendTo(".here");
}
})
</script>
You have multiple changes that you will have to make for it to work.
Use change instead of click for input elements.
$('#1a').(':checked') has to be replaced with $('#1a').is(':checked') and should be enclosed in a if block.
$('body').on('change', 'input[type="radio"]', function() {
var $this = $(this);
if ($this.hasClass('1a') && $this.is(':checked')) {
// closeset clonetester
var $clonetester = $this.closest('.clonetester').first();
if ($clonetester) {
$clonetester.clone().appendTo(".here");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="clonetester">
<input class="1a" type="radio" value="1" name="q1">yes
<input class="1b" type="radio" value="0" name="q1">no
<br />
<input class="date1" type="datetime-local" name="date" />date
<br />
</section>
<section class="here">clone follows</section>
In Code B, all checked checkbox items will be posted to server side when I click submit button, the server side will handle all checked checkbox items and recreate web page to return client side.
I hope to do the same thing in Code A, and more I hope the client side can display a Delete prompt information before post when I click the button btnDelete.
How can I write code to post all checked checkbox items to server side using javascript or jquery ?
Code A
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>
<script type="text/javascript">
function DeleteFile() {
if (confirm("Do you want to delete selected images?")) {
...
}
}
</script>
</head>
<body>
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
</form>
<input type="button" name="btnDelete" value="Delete Selected Images" onclick="DeleteFile()" />
</div>
</body>
</html>
Code B
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
<input type='submit' name='submit' value='Delete Selected Images'/>
</form>
</div>
</body>
</html>
You can add an event listener to the submit event and call the event.preventDefault() method when confirm() returns false.
JavaScript
document.querySelector('#myform').addEventListener('submit', event => {
if (!confirm('Do you want to delete selected images?')) {
event.preventDefault();
}
});
HTML
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
<input type="submit" name="btnDelete" value="Delete Selected Images" />
</form>
</div>
JS Fiddle demo.
If I select laptop radio button, the input text for computer should be not be enable to add any data and the the background should be grey instead of white.
Same logic if you select computer radio button and this time it would laptop.
I do not know how to create it.
Thanks!
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value=""" />
</span>
</div>
</form>
</body>
</html>
give id's to the input's and then on selected radio buton disable the other input id for computer and enable the input for the laptop
$(document).ready(function(){
$('input[type=radio][name=sex]').click(function(){
var related_class=$(this).val();
$('.'+related_class).prop('disabled',false);
$('input[type=radio][name=sex]').not(':checked').each(function(){
var other_class=$(this).val();
$('.'+other_class).prop('disabled',true);
});
});
});
Simmilar Fiddle Example
Try something like below using jQuery:
HTML
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input id="laptopVal" type="text" value="" />
</span>
</BR>
<input id="computer" type="radio" name="sex" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input id="computerVal"type="text" value=""" />
</span>
</div>
JAVASCRIPT
$( document ).ready(function() {
function handleClick(el) {
$('input[type=text]').css('background-color', 'grey');
$('input[type=text]').attr('readonly', 'true');
$('#' + el.attr('id') + 'Val').css('background-color', 'white');
$('#' + el.attr('id') + 'Val').attr('readonly', 'false');
}
handleClick($('#laptop'));
$("input:radio").click(function() {
handleClick($(this));
});
});
WORKING FIDDLE
You could do the following in jQuery. Let me know if you needed a pure javascript solution.
$(document).ready(function(){
$(".radio-group").on("change", ":radio", function() {
$(":text").prop("disabled", true);
$(this).next(".radio-choice-name").find(":text").prop("disabled", false);
});
});
input[disabled] { background-color: #eee }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="sex" value="laptop" checked />
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input type="text" value="" />
</span>
<br/>
<input id="computer" type="radio" name="sex" value="computer" />
<span class="radio-choice-name">
<label for="computer">computer</label>
<input type="text" value="" disabled />
</span>
</div>
</form>
I have done slight change to your html below, just added "class" attribute to input text and assigned value same as radio button values.
<!DOCTYPE html>
<html>
<body>
<form>
<div class="radio-group">
<input id="laptop" type="radio" name="device" value="laptop" checked>
<span class="radio-choice-name">
<label for="laptop">laptop</label>
<input class="laptop" type="text" value="" />
</span>
<br>
<input id="computer" type="radio" name="device" value="computer">
<span class="radio-choice-name">
<label for="computer">computer</label>
<input class="computer" type="text" value="" disabled/>
</span>
</div>
</form>
</body>
</html>
Here is the javascript:
<script type="text/javascript">
$(function () {
$('input:radio').on('change', function(){
var value = $(this).val();
$('.radio-group').find('input[type=text]').attr('disabled', 'disabled');
$('.' + value).removeAttr('disabled');
}
);
});
</script>
I think you will find this very easy approach.
If I am using one text box and 3 div, how can I set the entered value in that div?
Here is my code. I have to get the div value from the radio button selected. Likewise, how can I get the text box value?
Here is my code:
$(document).ready(function() {
$("#radio_submit").click(function(e) {
var check = $("input[name=user_options]:checked").parent().next().text();
if (!check) {
alert('Please select options!');
} else {
$('#valueee').html(check);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" value="456" />
</div>
<div name="deff" id="val1" x>123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options" value="456" />
</div>
<div name="deff" id="val2">456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options" value="678" />
</div>
<div name="deff" id="val3">678</div>
<span>jquery</span>
<br></br>
<div name="deff" id="val4">
<input type="radio" name="user_options" value="675" />
</div>
<input class="text-input" id="other-input" size="5" value="">
<span>JS</span>
<br></br>
<div><button id="radio_submit" type="button">Show Selected Radio</button></div>
</form>
<div id="valueee"></div>
Not sure what your meaning but may be you need to again check and try to get val() if is undefined,
View Demo jsFiddle
$(document).ready(function () {
$("#radio_submit").click(function (e) {
var check = $("input[name=user_options]:checked").parent().next().text();
if (!check) var check = $("input[name=user_options]:checked").parent().next().val();
if (!check) {
alert('Please select options!');
} else {
$('#valueee').html(check);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<form id="myform">
<div>Choose option:</div>
<div>
<input type="radio" name="user_options" value="456" />
</div>
<div name="deff" id="val1" x>123</div>
<span>CSS</span>
<br></br>
<div>
<input type="radio" name="user_options" value="456" />
</div>
<div name="deff" id="val2">456</div>
<span>html</span>
<br></br>
<div>
<input type="radio" name="user_options" value="678" />
</div>
<div name="deff" id="val3">678</div>
<span>jquery</span>
<br></br>
<div name="deff" id="val4">
<input type="radio" name="user_options" value="675" />
</div>
<input class="text-input" id="other-input" size="5" value="" />
<span>JS</span>
<br></br>
<div>
<button id="radio_submit" type="button">Show Selected Radio</button>
</div>
</form>
<div id="valueee"></div>
You can use is() to check if next element is div or input. If input then use .val() to read value otherwise use .text().
$(document).ready(function() {
$("#radio_submit").click(function (e) {
var next = $("input[name=user_options]:checked").parent().next();
//check if next element is input and read value otherwise read text
var check = '';
if($(next).is('input'))
check = $(next).val();
else
check = $(next).text();
if(!check){
alert('Please select options!');
}else{
$('#valueee').html(check);
}
});
});
DEMO
i have the following form
<html>
<head>
<style type="text/css">
.on {
border:1px outset;
color:#369;
background:#efefef;
}
.off {
border:1px outset;
color:#369;
background:#f9d543;
}
</style>
<script language="javascript">
function togglestyle(el){
if(el.className == "on") {
el.className="off";
} else {
el.className="on";
}
}
</script>
</head>
<body>
<form method="POST" action="#" >
<input type="button" id="btn" value="1" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="2" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="3" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="4" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="5" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="button" id="btn" value="6" name="a[]" class="off" onclick="togglestyle(this)" />
<input type="submit" name="submit" value="Submit" />
</form>
</body>
</html>
Here i want to use toggle action, i dont want to use checkbox here, I want to pass the toggled value from this form. Is there any way to do this?
in the same page i already have some checkbox with with check action enabled, here i want to pass max 3 toggled values, i have tried using radio box but that will work only for one, not with 3. how to do this.