I have a view with checkboxes, generated dynamically, and a button for chech/unchek all the checkboxes. I try the code bellow but, the checkboxes are not checked ob button click event. Please help.
Thank you.
View with checkboxes:
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
#for (int i = 0; i < #Model.workDaysList.Count; i++)
{
<div class="framed">
<div data-role="collapsible" data-collapsed="true" class="ui-btn-inner ui-corner-top ui-corner-bottom">
<h3>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">
<label for="#Model.workDaysList[i][0]" data-theme="c">
#Model.workDaysList[i][1].Substring(6, 2)/#Model.workDaysList[i][1].Substring(4, 2)/#Model.workDaysList[i][1].Substring(0, 4)
</label>
</span>
</div>
</h3>
#Model.detailDaysList[i][0] / #Model.detailDaysList[i][1]
<br />
#Model.detailDaysList[i][2] / #Model.detailDaysList[i][3]
<br />
#Model.detailDaysList[i][4] h
</div>
</div>
</div>
}
Jquery code:
<script type="text/javascript">
$(document).ready(function () {
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
});
</script>
Try This:
<script lang='javascript'>
$(document).ready(function(){
$('#selectinvert').click(function(){
$("input[type='checkbox']").each(function (){
if($(this).is(':checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
});
})
});
</script>
there are closing }) missing..
btw: the toggle can written like this:
this.checked = !this.checked
Try to start with a basic HTML code and build upon that! Your model code might be braking your HTML. You can find the working prototype here!
<button id="selectinvert" name="selectinvert" class="clear-selection ui-btn-hidden" aria-disabled="false" > Select / Deselect All</button>
<div class="framed">
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">First</span>
</div>
<div class="ui-checkbox" id="checkbox">
<input type="checkbox" id="#Model.workDaysList[i][0]" />
<span class="ui-btn-text">Second</span>
</div>
</div>
$("#selectinvert").click(function() {
$("INPUT[type='checkbox']").each(function() {
if (this.checked == false) {
this.checked = true;
} else {
this.checked = false;
}
});
});
As others suggest, you were missing closing brackets.
You could also shorten your code a bit:
$("#selectinvert").click(function() {
$("input[type='checkbox']").each(function() {
this.checked = !this.checked;
});
});
Also note that your problem has nothing to do with ASP.NET or jQuery UI.
try
$("#selectinvert").click(function () {
$("INPUT[type='checkbox']").each(function () {
if (!$(this).is(":checked")) {
$(this).attr('checked','checked');
} else {
$(this).removeAttr('checked','checked');
}
})
});
I think the code you have written will only only work when all the checkboxes are either checked or unchecked..
What happens when some of them are checked.. Your code will just toggle those..
Your logic should be dependent on the button and not the checkboxes..
$(document).ready(function() {
var isChecked = false;
$("#selectinvert").click(function() {
var $checkboxes = $("INPUT[type='checkbox']") ;
if(isChecked){
isChecked = false;
}
else{
isChecked = true;
}
$checkboxes.prop('checked' , isChecked);
});
});
Related
This is code for a button, but when it is checked it should print "checked" but everytime I press it, it logs "not checked" no matter the status of the button. How do I fix this?
document.addEventListener('DOMContentLoaded', function() {
var checkbox = document.querySelector('#auto-admit .mdc-switch');
function isChecked() {
if (checkbox.checked ) {
// do this
console.log('Checked');
} else {
// do that
console.log('Not checked');
}
}
checkbox.addEventListener('change', function() {
isChecked();
});
isChecked();
}
);
<div id="auto-admit">
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb"></div>
<input
type="checkbox"
id="autoadmit-switch"
class="mdc-switch__native-control"
role="switch"
aria-checked="false"
/>
</div>
</div>
<label
id="autoadmit-switch-label"
class="mdc-button switch-label"
for="autoadmit-switch"
>Auto admit</label
>
</div>
You are trying to get the div container, rather than input.
var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');
document.addEventListener('DOMContentLoaded', function() {
var checkbox = document.querySelector('#auto-admit .mdc-switch__native-control');
function isChecked() {
if (checkbox.checked ) {
// do this
console.log('Checked');
} else {
// do that
console.log('Not checked');
}
}
checkbox.addEventListener('change', function() {
isChecked();
});
isChecked();
}
);
<div id="auto-admit">
<div class="mdc-switch">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb"></div>
<input
type="checkbox"
id="autoadmit-switch"
class="mdc-switch__native-control"
role="switch"
aria-checked="false"
/>
</div>
</div>
<label
id="autoadmit-switch-label"
class="mdc-button switch-label"
for="autoadmit-switch"
>Auto admit</label
>
</div>
I need help because confused how to block form submit if no one checkbox checked.
var $form = $('#send-invite-form');
var $checkbox = $('input[class^="invitation-friends"]');
$form.on('submit', function(e) {
$.each($checkbox, function(index, value) {
if (!$(value).is(':checked')) {
alert('Opps! You not select friends.');
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send-invite-form">
<input type="checkbox" class="invitation-friends" value="875" />
<input type="checkbox" class="invitation-friends" value="394" />
<button type="submit">Send</submit>
</form>
The code check every checkbox. I don't want it. I want if one checkbox checked, the form can submit. If no one checked, bail submit.
Please help.
There is a way to do this that is much simpler than what you are doing. There's no need to loop. Just used the :checked pseudo-class selector to get a set of nodes that are checked and check the .length of the resulting set of nodes. If the .length is 0, no checkboxes have been checked.
$( '#send-invite-form' ).on('submit', function(e) {
if($( 'input[class^="invitation-friends"]:checked' ).length === 0) {
alert( 'Oops! You not select friends.' );
e.preventDefault();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send-invite-form">
<input type="checkbox" class="invitation-friends" value="875" />
<input type="checkbox" class="invitation-friends" value="394" />
<button type="submit">Send</submit>
</form>
try this, no need to explain i think:
var found = false;
$.each( $checkbox, function(index, value) {
if( $(this).is(':checked') ) {
found = true;
}
});
if(!found){
alert( 'Opps! You not select friends.' );
e.preventDefault();
}
The first problem comes from this line :
if ( !$(value).is(':checked')) {
Should be :
if ( !$(this).is(':checked')) {
Since value contains the value of the selected checkbox not the object, so $(value) will not work.
Then if you want to submit with at least one checkbox you could check the length of checked input's like :
if( $('input.invitation-friends:checked').length == 0 )
{
return false;
}
Hope this helps.
var $form = $('#send-invite-form');
var $checkbox = $('input[class^="invitation-friends"]');
$form.on('submit', function(e) {
if( $('input.invitation-friends:checked').length == 0 )
{
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send-invite-form">
<input type="checkbox" class="invitation-friends" value="875" />
<input type="checkbox" class="invitation-friends" value="394" />
<button type="submit">Send</submit>
</form>
Since submit button is controlling form submit, I am controlling its enable/disable status based on checkbox click
window.onload = checkBoxEventAndOnSubmitFunctionality();
function checkBoxEventAndOnSubmitFunctionality() {
let checkBoxes = document.getElementsByClassName('invitation-friends');
let checkBoxChecked = 0;
for(i=0;i<checkBoxes.length;i++) {
checkBoxes[i].onclick = function(e) {
if(e.path[0].checked) checkBoxChecked += 1;
else checkBoxChecked -= 1;
}
}
document.getElementById("send-invite-form").onsubmit = function(e) {
if(checkBoxChecked !=0) {
alert("can submit");
document.getElementById("send-invite-form").submit();
}
else {
alert("can NOT submit");
e.preventDefault();
}
}
}
<form id="send-invite-form" onsubmit="checkForCheckBoxes" method="POST">
<input type="checkbox" class="invitation-friends" value="875" />
<input type="checkbox" class="invitation-friends" value="394" />
<button type="submit" id="submitButton">Send</button>
</form>
Do you have any idea to rewrite the jQuery code to choose between to two selection options (Yes and No)? .
I tried this in jQuery :
$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='decision']").change(function(){
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show() && $("#send_to_two").hide()
}else if(this.value =='two'){
$("#send_to_two").show()
}else{
$("#send_to_one").hide();
}
}
});
});
CSS :
#send_to_one{
display:none;
}
#send_to_two{
display:none;
}
The "Yes" button send_to_one works well, if I select it, the correct informations are shown and the informations from send_to_two are hidden. If I select the "No" button the informations from send_to_two are shown, but the send_to_one informations are still shown. I tried to use the command from the first if statement, but this doesn't work. Do you have any ideas?
Thanks for your help, but always i add the recommended command the send_to_twoaction doesn't work.
This is my _form. Did i maybe make a mistake there?
<h2>Are you insured?</h2>
<div id="send_to">
<input type="radio" id="send_poll" name="decision" value="one" checked="checked" />Yes<br/>
<input type="radio" id="send_poll" name="decision" value="two" />No<br/>
<div id="send_to_one">
<div class="table-row-2">
<div align="center">
<div class="field">
<div class="table"><%= ........ %></div><div class="table"></div><div class="table"></div>
</div>
</div>
</div>
<div id="send_to_two">
<div class="table-row-2">
<div align="center">
<div class="field">
<div class="table">
<div class="table"><%= ..... %></div><div class="table"></div><div class="table"></div></div>
</div>
</div>
</div>
</div>
</div>
Thanks for your Help!
You're just missing the hide statement in the second condition, your code should be :
if(this.value =='one')
{
$("#send_to_one").show();
$("#send_to_two").hide();
}else if(this.value =='two'){
$("#send_to_two").show();
$("#send_to_one").hide(); //<<---------- Adding this line to hide 'send_to_one'
}else{
$("#send_to_one").hide();
}
Because you're using jquery better if you use jquery object $(thhis):
$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='decision']").change(function()
{
if( $(this).is(':checked') )
{
if($(this).val()==='one')
{
$("#send_to_one").show();
$("#send_to_two").hide();
}
else if($(this).val()==='two')
{
$("#send_to_two").show();
$("#send_to_one").hide();
}
else
{
$("#send_to_one").hide();
}
}
});
});
Hope this helps.
$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='decision']").change(function(){
if($(this).is(':checked'))
{
if($(this).val()==='one')
{
$("#send_to_one").show();
$("#send_to_two").hide();
}
else if($(this).val()==='two')
{
$("#send_to_two").show();
$("#send_to_one").hide();
}
else
{
$("#send_to_one").hide();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='decision' value='one'/>Yes
<input type="radio" name='decision' value='two' checked/>No
<br/>
<div id="send_to_one">
send_to_one div
</div>
<div id="send_to_two">
send_to_two div
</div>
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show() && $("#send_to_two").hide()
}else if(this.value =='two'){
$("#send_to_two").show();
$("#send_to_one").hide()
}else{
$("#send_to_one").hide();
}
}
Try this And check your code for missing ;
$(document).ready(function() {
$("#send_to_one").hide();
$("input:radio[name='decision']").change(function(){
if(this.checked){
if(this.value =='one'){
$("#send_to_one").show();
$("#send_to_two").hide();
}else if(this.value =='two'){
$("#send_to_two").show();
$("#send_to_one").hide();
}
}
});
});
Hope this will help you:
$(document).ready(function() {
$("#send_to_one").hide();
$("#send_to_two").hide();
$("input:radio[name='decision']").click(function(){
if($(this).val() =='one'){
$("#send_to_one").show();
$("#send_to_two").hide();
}else if($(this).val() =='two'){
$("#send_to_one").hide();
$("#send_to_two").show();
}else{
$("#send_to_one").hide();
$("#send_to_two").hide();
}
});
});
I have tried all the solutions i could find but i am stuck. I have 2 checkboxes, HBO and Marvin. Marvin needs to show a div. HBO needs to show nothing. It works until I need to click the checkbox twice for it to show/hide. usually this would be a $apply() issue but that does not seem to be the case. I believe I am not updating the model correctly. I forgot to mention that the checkboxes need to reset to false when the other is true.
plunker
var ctrl = this;
ctrl.showMeMarvin = function () {
if (ctrl.show === true) {
//$timeout(function () {
ctrl.marvin = false;
ctrl.show = false;
ctrl.hbo = false;
//})
}
else {
//$timeout(function () {
ctrl.marvin = true;
ctrl.show = true;
ctrl.hbo = false;
//})
}
};
ctrl.showMeHBO = function () {
if (ctrl.show === true) {
// $timeout(function () {
ctrl.show = false;
ctrl.hbo = true;
ctrl.marvin = false;
//})
}
else {
//$timeout(function () {
ctrl.marvin = false;
ctrl.hbo = true;
//})
}
};
Just change the div ng-show like this:
<div class="col-xs-12" ng-show="checkedHBO == 1">
And it will work without any additional functions calls.
Edit:
To have it working with the condition to reset the prev selected value you can use this:
<div ng-controller="ShowController as ctrl">
<div class="col-xs-12">
<label for="checkedHBO" class="ts-label">HBO</label>
<input id="checkedHBO" name="mygroup" type="radio" value="hbo" ng-model="checkedHBO" ng-change="checkedMarvin = undefined"/>
<label for="checkedMarvin" class="ts-label">Marvin</label>
<input id="checkedMarvin" name="mygroup" type="radio" value="marvin" ng-model="checkedMarvin" ng-change="checkedHBO = undefined"/>
</div>
<div class="col-xs-12" ng-show="checkedHBO">
<center>
<div class="jumbotron">
DIV 1
</div>
<div class="jumbotron">
DIV 2
</div>
<div class="jumbotron">
DIV 3
</div>
</center>
</div>
</div>
You should be using a radio input instead of checkboxes. http://plnkr.co/edit/hE68w9RKUoFamAWGgRzR?p=preview
<input name="radio" id="checkedHBO" type="radio" ng-model="ctrl.show" ng-value="false" />
<input name="radio" id="checkedMarvin" type="radio" ng-model="ctrl.show" ng-value="true"/>
When I click on one of the DIV it will find the check-box inside the DIV and "Check" it. So the other DIV will hide.
I am facing problem on How do I disable other DIV When the time it is hiding itself or else I can click other DIV and broke the initial idea by only left the DIV that is clicked.
2)How do I get the value of the checked div ?
3)How do I detect if no check-box were selected ??
TQ
<div id="answer">
<h3>A</h3>
<p id="result">Tick the correct answer</p>
<div id="a1">A. <input type="checkbox" value="1" name="ans" ></input></div>
<div id="a2">B. <input type="checkbox" value="2" name="ans"></input></div>
<div id="a3">C. <input type="checkbox" value="3" name="ans"></input></div>
<div id="a4">D. <input type="checkbox" value="4" name="ans"></input></div>
</div>
<button id="checkbtn">Check Answer</button>
var btncounter = 0;
$("#checkbtn").hide();
$("#answer > div").click(function (e) {
e.stopPropagation();
var status = $(this).find("input:checkbox").prop('checked');
$(this).find("input:checkbox").prop("checked", !status);
$(this).siblings('div').slideToggle(!status);
btncounter++;
if(btncounter%2 == 1)
$("#checkbtn").show();
else
$("#checkbtn").hide();
});
Try
$("#checkbtn").hide();
var $checks = $("#answer > div input:checkbox").change(function (e) {
$divs.stop(true);
var $div = $(this).parent();
var $sibs = $divs.not($div)[this.checked ? 'slideUp' : 'slideDown']();
$div.slideDown();
$sibs.find('input:checkbox').prop('checked', false);
$("#checkbtn").toggle($checks.filter(':checked').length > 0);
})
var $divs = $("#answer > div").click(function (e) {
if (!$(e.target).is('input')) {
$(this).find("input:checkbox").prop("checked", function (i, checked) {
return !checked;
}).change();
}
});
Demo: Fiddle
Try like this,
$("#checkbtn").hide();
$("#answer > div").click(function (e) {
$(this).find("input[type=checkbox]").trigger("click");
});
$("input[type=checkbox]").click(function (e) {
$(this).parent().siblings('div').slideToggle();
$("#checkbtn").toggle();
e.stopPropagation();
});
Fiddle
Edit
var btncounter = 0;
$("#checkbtn").hide();
$("#answer > div").click(function (e) {
if (!$(this).find("input[type=checkbox]").attr("disabled")) {
$(this).find("input[type=checkbox]").trigger("click");
}
});
$("input[type=checkbox]").click(function (e) {
$("input[type=checkbox]").not(this).attr("disabled", true);
$(this).parent().siblings('div').stop().slideToggle("slow", function () {
$("input[type=checkbox]").not(this).removeAttr("disabled");
});
$("#checkbtn").toggle();
e.stopPropagation();
});
$("#checkbtn").click(function(){
alert($("input[type=checkbox]:checked").parent().text());
});
Updated fiddle