How to get selected check box value to a variable in script - javascript

I have a html form content with two check boxes like
<p class="text">
<input type="checkbox" value="Yes" id="ques11" name="radiobutton" class="option_1" />
<label for="ques11">True</label>
<span class="hide" id="ans1">Answer: True</span>
<span id="rite11" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
<span id="wrong11" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>
<p class="text">
<input type="checkbox" value="No" id="ques12" name="radiobutton" class="option_2" />
<label for="ques12">False</label>
<span id="rite12" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
<span id="wrong12" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>
for this i have written code to get the checkboxes
$(function(){
$('#_submit').on('click', function(){
completedata = 'selected_';
$('input[type="checkbox"]').each(function(){
var quesNo = $(this).closest("div[id^='questionsNo_']").attr('id').split('_');
var chapterId = quesNo[1];
var questionId = quesNo[2];
var optionId = $(this).attr('class').split('_')[1];
var currentAns = $(this).val();
completedata += 'choose'+','+chapterId + ',' + questionId + ',' + optionId + ',' + currentAns + '_';
completedata = completedata.substr(0, completedata.length - 1) + '_selectedEnd';
if(completedata == "selected_selectedEnd"){
document.getElementById("selids").innerHTML="";
}
else {
$('#selids').text(completedata);
}
In this line i have to get which checkbox is checked, how to get that using this script. Please help me how to do that.
var optionId = $(this).attr('class').split('_')[1];
i want which check box is clicked based on class="option_1" or class="option_2".

Try this:
$("input[name='radiobutton']").click(function(){
if($(this).is(':checked'))
{
// checked
}
else
{
// unchecked
}
});

Related

Checkbox and Radio input error in JavaScript and JQuery task list

Why does my Priority checkbox return 'on' as a result after selecting either the 'Important' or 'Unimportant' checkbox? Why does it not return either 'Important' or 'Unimportant'?
Also, why does my Category radio selection only return the correct selection the first time I input and click the add button - on every subsequent attempt, the return is blank for Category. All the other input options work correctly.
var $addButton = $(".btn-primary");
var $removeButton = $(".btn-danger");
var $todoList = $(".uncomplete");
var $doneList = $(".completed");
//Take Text Input and Add <li> to To Do List
$addButton.on("click", function(){
//Creating object Variables
var $sort = $(".sort").val();
var $newTask = $(".newTask").val();
var $taskDescr = $(".taskDescr").val();
var $taskDate = $(".taskDate").val();
// var $category= $(".category").val();
var $category= $("input[type='radio'][name='category']:checked").val();
//var $importance = $("input[type='checkbox'][name='importance']:checked").val();
var $importance = $('<input type="checkbox" name="importance"/>').val();
var $newTaskString = $sort + ", " + $taskDescr + ", " + $newTask + ", " + $taskDate + ", " + $category + ", " + $importance + " ";
var $todoList = $(".uncompleted");
//call append method on $todoList
$todoList.append("<li>" + $newTaskString + "<button><span> Done</span></button><button><span> Remove</span></button></li>").addClass("todo");
//add styles to button added to DOM by append
var $span = $(".todo button span");
var $button = $(".todo button");
$button.addClass("btn btn-success");
$span.addClass("glyphicon glyphicon-ok");
$("input").val("");
})
//When Success button Clicked, remove task from to do list and append to completed tasks
var $doneButton = $(".btn-success");
$(".uncompleted").on("click", ".btn-success", function(){
var $completedTask = $( this ).parent("li").text();
$(this).parent("li").remove();
$doneList.append("<li>" + $completedTask + "<button><span> Remove</span></button></li>").addClass("done");
$(".done button").addClass("btn btn-danger");
$(".done button span").addClass("glyphicon glyphicon-remove");
})
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="list-wrap" contenteditable="false">
<div class="list-inner-wrap">
<h2 class="title">ToDo List</h2>
<h3 class="title">Add Task</h2>
<label for="sort">Sort Order:</label><input type="text" class="sort" name="sort" id="sort" value="" placeholder="A,B,C,etc.">
<br>
<label for="task-name">Task Name:</label><input type="text" class="newTask" name="task-name" id="task-name" value="" placeholder="My task...">
<br>
<label for="task-descr">Task Descr:</label><input type="text" class="taskDescr" name="task-descr" id="task-descr" value="" placeholder="Buy milk...">
<!--<h4>Date</h4>-->
<br>
<label for="task-date">Start Date:</label><input type="text" class="taskDate" name="task-date" id="task-date" value="" placeholder="dd/mm/yyyy">
<br>
<form method="POST" action="..." name="radiodemo" id="radiodemo" onsubmit="getCategory();">
<label for="category"> Category:</label>
<input type="radio" id="grocery" name="category" value="Grocery" class="category" checked="checked">
<label for="grocery">Grocery</label>
<input type="radio" id="work" name="category" value="Work" class="category">
<label for="work">Work</label>
<input type="radio" id="chores" name="category" value="Chores" class="category">
<label for="chores">Chores</label>
<input type="radio" id="finance" name="category" value="Finance" class="category">
<label for="finance">Finance</label>
<br>
</form>
<label for="importance">Priority:</label>&nbsp &nbsp Important<input type="checkbox" class="importance" name="important" id="important" value="Important">
<label for="importance"></label>Unimportant<input type="checkbox" class="importance" name="unimportant" id="unimportant" value="Unimportant">
<br>
<button class="btn btn-primary">
<span class="glyphicon glyphicon-plus"> Add</span>
</button>
<br>
<h3 class="title">To Do</h2>
<h6><i>Click task item to edit or modify</i></h6>
<ul class="uncompleted" id="id01"><!--contenteditable="true"-->
<li>Need to be completed task
<button class="btn btn-success"><span class="glyphicon glyphicon-ok"> Done</span>
</button>
<button class="btn btn-danger"><span class="glyphicon glyphicon-remove"> Remove</span>
</button>
<br>
</li>
</ul>

jQuery: How to print value in input?

my question is super basic, but I'm not super informed about javascript so I have 5 radio buttons(like rating) and I want to print the value when some of them is checked to input field. I end up to print it with alert and it works, but I want to print it in input.
$(document).ready(function(){
$("input[type='button']").click(function(){
var radioValue = $("input[name='difficulty']:checked").val();
if(radioValue){
alert("Your are a - " + radioValue);
}
});
});
$('.rating-star').on('click', function() {
$(this).parents('.rating').find('.rating-star').removeClass('checked'); // uncheck previously checked star
$(this).addClass('checked'); // check currently selected star
var ratingValue = $(this).attr('data-rating'); // get rating value
var ratingTarget = $(this).attr('data-target');
// set the rating value to corresponding target radio input
$('input[name="' + ratingTarget + '"][value="' + ratingValue + '"]').prop('checked', true);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<form>
<label>Question...</label>
<br>
<input type="radio" name="difficulty" value="1">
<input type="radio" name="difficulty" value="2">
<input type="radio" name="difficulty" value="3">
<input type="radio" name="difficulty" value="4">
<input type="radio" name="difficulty" value="5">
<br>
<div class="rating">
<i class="rating-star" data-rating="5" data-target="difficulty"></i>
<i class="rating-star" data-rating="4" data-target="difficulty"></i>
<i class="rating-star" data-rating="3" data-target="difficulty"></i>
<i class="rating-star" data-rating="2" data-target="difficulty"></i>
<i class="rating-star" data-rating="1" data-target="difficulty"></i>
</div>
</form>
<p><input type="button" value="Get Value"></p>
<input type="text" id="radioBtn" name="printRadio">
Try on method in print script as well.
$(document).ready(function(){
$("input[type='button']").on('click',function(){
var radioValue = $("input[name='difficulty']:checked").val();
if(radioValue){
//alert("Your are a - " + radioValue);
$('#radioBtn').val(radioValue);
}
});
});

Dynamic textboxes are not removing

I am adding textboxes through jquery and for one text box it is removing perfeclty but when I add two textboxes then it does now remove both.
this is jquery
<script>
$(document).ready(function($){
$('.product-form .add-product').click(function(){
var n = $('.text-product').length + 1;
var product_html = $('<p class="text-product"><label for="product' + n + '">Name <span class="product-number">' + n + '</span></label> <input required type="text" name="productnames[]" value="" id="product' + n + '" /> <label for="productprice' + n + '">Price <span class="product-number">' + n + '</span></label> <input required type="text" name="productprices[]" value="" id="productprice' + n + '" />Remove</p>');
product_html.hide();
$('.product-form p.text-product:last').after(product_html);
product_html.fadeIn('slow');
return false;
});
$('.product-form').on('click', '.remove-category', function(){
$(this).parent().fadeOut("slow", function() {
$(this).remove();
$('.product-number').each(function(index){
$(this).text( index + 1 );
});
});
return false;
});
});
</script>
and this is my html
<div>
<form>
<div class="product-form">
<p class="text-product">
<label for="product1">Name <span class="product-number">1</span></label>
<input required type="text" name="productnames[]" value="" id="product1" />
<label for="product1">Price <span class="product-number">1</span></label>
<input required type="text" name="productprices[]" value="" id="product1" />
<div>
<a class="add-product" href="#">Add More</a>
</div>
</p>
</div>
<div>
<input type="submit" name="submitDetails" value="Finish"/>
</div>
</form>
</div>
If only one textbox for instance productnames is added then it removal function works but when I add botch productnames and productprices textbox removal function does not remove both
Your code should read $('.product-form').on('click', '.remove-product', function() rather than 'click', '.remove-category'. Also, don't place the Add More div element inside the paragraph element. The numbering also breaks a bit, but you can figure that out.

How to select any check box in multiple and submit data

I have written code in xhtml for submitting checkboxes data,resetting the checkboxes data..
my form data is
<div class="outer">
<div class="pg15outer">
<div class="pgleft">
<p class=" pg2text"><img src="images/icon_assess.png" alt="images" /></p>
</div>
<div class="pgrgt pg2text">
<p class=""><span class="activespan">Self Assessment 3</span></p>
</div>
</div>
<p class="text">Try to answer the following questions without referring to your notes. If you find this difficult then consult your notes and make sure you can answer the questions.</p>
<div id="questionsNo_1_1">
<!-- questionsNo_chapterNo_quesNo-->
<p class="text" id="question1">1. An objective of record keeping is to ensure that a client of an accountable institution can be fully identified and located.</p>
<!--<li><label for="ques11"><javascript></label></li>-->
<p class="text">
<input type="checkbox" value="Yes" id="ques11" name="radiobutton" class="option_1" />
<label for="ques11">True</label>
<span class="hide" id="ans_1_1">Answer: True</span>
<span id="rite11" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
<span id="wrong11" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>
<p class="text">
<input type="checkbox" value="No" id="ques12" name="radiobutton" class="option_2" />
<label for="ques12">False</label>
<span id="rite12" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
<span id="wrong12" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>
</div>
<div id="questionsNo_1_2">
<!-- questionsNo_chapterNo_quesNo-->
<p class="text" id="question2">2. The records that an accountable institution is required to maintain and retain may be kept in either paper or electronic form.</p>
<p class="text">
<input type="checkbox" value="No" id="ques13" name="radiobutton" class="option_1" />
<label for="ques13">True</label>
<span id="rite13" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
<span id="wrong13" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>
<p class="text">
<input type="checkbox" value="Yes" id="ques14" name="radiobutton" class="option_2" />
<label for="ques14">False</label>
<span class="hide" id="ans_1_2">Answer: False</span>
<span id="rite14" class="hide"><img class="imgsize" src="images/ans_correct.png"/></span>
<span id="wrong14" class="hide"><img class="imgsize" src="images/ans_wrong.png"/></span> </p>
</div>
<div id="mainalign">
<span class="chk-btn button" onclick="" id="_submit">Submit</span>
<span class="jumble-rst button" onclick="reset_fu(3)" style="margin-left:1%">Reset</span>
<span class="button" onclick="checkans()">Answers</span>
</div>
</div>
<p class="pg-no1">16</p>
in this, There are two questions each contains two check boxes , I want to select only one checkbox at a time , In this code two checkboxes are selecting.
And for submitting and resetting I write functions ,resetting is not working,
<script>
function check(numQues) {
for (var i = 1; i <= numQues; i++) {
for (var j = 1; j <= 4; j++) {
document.getElementById("rite" + i + j).style.display = "none";
document.getElementById("wrong" + i + j).style.display = "none";
if (document.getElementById("ques" + i + j).checked) {
var result = document.getElementById("ques" + i + j).value;
if (result == 'yes')
{
document.getElementById("rite" + i + j).style.display = "inline";
document.getElementById("wrong" + i + j).style.display = "none";
} else {
document.getElementById("rite" + i + j).style.display = "none";
document.getElementById("wrong" + i + j).style.display = "inline";
}
}
}
}
}
function reset_fu(numQues) {
for (var i = 1; i <= numQues; i++) {
for (var j = 1; j <= 4; j++) {
document.getElementById("ques" + i + j).checked = "";
document.getElementById("rite" + i + j).style.display = "none";
document.getElementById("wrong" + i + j).style.display = "none";
document.getElementById("ans1").style.display = "none";
document.getElementById("ans2").style.display = "none";
}
}
}
function checkans() {
document.getElementById("ans1").style.display = "inline";
document.getElementById("ans2").style.display = "inline";
}
</script>
How to reset the checked checkboxes, only one check box has to select in each question
Here is an easy solution
$(document).ready(function(){
$('#questionsNo_1_1 input:checkbox').click(function() {
$('#questionsNo_1_1 input:checkbox').not(this).prop('checked', false);
});
$('#questionsNo_1_2 input:checkbox').click(function() {
$('#questionsNo_1_2 input:checkbox').not(this).prop('checked', false);
});
});
Here is the fiddle
As I don't have the CSS classes that you have defined the styling won't apply

Javascript, toggle radio button images with the same name

I have a form where I have replaced the radio buttons with images, and when the images are clicked, they show a darker form of the image to show that it is active, but, I can't quite figure out how to get the darker image to go back to the standard one when I click on a different radio button image. Here is what I've got so far.
$("[name=make]").on({
"click": function() {
var val = $(this).attr('value');
console.log("Value: " + val);
var imgName = "#" + val + "-icon";
$(imgName).attr('src', '/images/make-icons/' + val + '-hover.png');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<input id="ford" class="dis-none" type="radio" name="make" value="ford">
<img class="make-icons" src="/images/make-icons/ford.png" id="ford-icon">
</label>
<label>
<input id="chevrolet" class="dis-none" type="radio" name="make" value="chevrolet">
<img class="make-icons" src="/images/make-icons/chevrolet.png" id="chevrolet-icon">
</label>
<label>
<input id="gmc" class="dis-none" type="radio" name="make" value="gmc">
<img class="make-icons" src="/images/make-icons/gmc.png" id="gmc-icon">
</label>
<label>
<input id="dodge" class="dis-none" type="radio" name="make" value="dodge">
<img class="make-icons" src="/images/make-icons/dodge.png" id="dodge-icon">
</label>
<label>
<input id="toyota" class="dis-none" type="radio" name="make" value="toyota">
<img class="make-icons" src="/images/make-icons/toyota.png" id="toyota-icon">
</label>
<label>
<input id="nissan" class="dis-none" type="radio" name="make" value="nissan">
<img class="make-icons" src="/images/make-icons/nissan.png" id="nissan-icon">
</label>
check for the state of the radio
$("[name=make]").on({
"change": function() {
var suffix = '';
if ($(this).is(':checked')) {
suffix = '-hover';
}
var val = $(this).attr('value');
console.log("Value: " + val);
var imgName = "#" + val + "-icon";
$(imgName).attr('src', '/images/make-icons/' + val + suffix + '.png');
}
});

Categories

Resources