I have a problem regarding checking checkbox by JS.When I checked the checkbox by JS it seems like in program that it's checked but in UI it's not updated .
if anyone have solution for this
<!DOCTYPE html>
<html>
<head>
<title>Check</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getCheckedValue()
{
return ((document.getElementById("rock").checked));
}
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked="checked";
alert((document.getElementById(toBeChecked).checked))
alert($('#'+toBeChecked).attr('checked'))
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>What kind/s of music do you listen to?</h1>
</div><!-- /header -->
<div data-role="content">
<input type="checkbox" class="music" name="music" id="rock" value="rock" >
<label for="rock">Rock</label>
<input type="button" value="Get" onclick="alert(getCheckedValue())">
<input type="button" value="Set" onclick="setCheckedValue('rock') ">
</div>
</div>
</body>
</html>
Instead of using attr I would highly recommend you use prop.
The preferred cross-browser-compatible way to determine if a checkbox is checked is to check for a "truthy" value on the element's property using one of the following:
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.
$("input").prop("disabled", false);
$("input").prop("checked", true);
$("input").val("someValue");
I have worked after getting response from all of your efforts and the working code is below.
<!DOCTYPE html>
<html>
<head>
<title>Check</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
function getCheckedValue()
{
return (document.getElementById("rock").checked);
//return $('input[name=music]').checked;
}
function setCheckedValue(checkboxName,toBeChecked){
$('input[name='+checkboxName+']').prop("checked", true).checkboxradio("refresh");
}
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>What kind/s of music do you listen to?</h1>
</div><!-- /header -->
<div data-role="content">
<input type="checkbox" class="music" name="music" id="rock" value="rock" >
<label for="rock">Rock</label>
<input type="button" value="Get" onclick="alert(getCheckedValue())">
<input type="button" value="Set" onclick="setCheckedValue('music','rock') ">
</div>
</div>
</body>
</html>
try
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked=true;
alert((document.getElementById(toBeChecked).checked))
alert($('#'+toBeChecked).prop('checked'))
}
Jquery-mobile appends classes for such things. Basically within that one input/label pair you have the following:
<div class="ui-checkbox">
<input type="checkbox" class="music" name="music" id="rock" value="rock">
<label for="rock" data-corners="true" data-shadow="false" data-iconshadow="true" data- wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-off ui-checkbox-on ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">Rock</span>
<span class="ui-icon ui-icon-checkbox-off ui-icon-shadow"> </span>
</span>
</label>
</div>
What you need to do is find a way to remove and add the classes to the label and span tags. I've done this for the label, but not for the span as I'm about to finally get some sleep.
function setCheckedValue(toBeChecked){
document.getElementById(toBeChecked).checked="checked";
$("label[for='rock']").addClass("ui-checkbox-off");
$("label[for='rock']").addClass("ui-checkbox-on");
}
I did stumble across:
$("#checkbox-label").checkboxradio("refresh");
From: http://forum.jquery.com/topic/what-is-the-most-effective-way-of-unchecking-a-checkbox
Not entirely the same question, I know but slightly relevant. I didn't have the chance to finagle with it and get it to work...nor did I look much more into it to see if it does even work.
In short, the property is being set to "checked", however, the elements need to have their css refreshed in order to accommodate the new 'state'.
I hope this helps!
Related
I have a checkbox that if checked, will check the other checkbox. I am using material design. The checked property of the material box checkbox in undefined. How do I make the checked property become defined? What am I doing wrong?
This is the link where the problem happens
<script>
$(document).ready(function(){
$("#exclude_all").change(function(){
var element_all = document.querySelectorAll('[id="exclude_all"]');
var elements = document.querySelectorAll('[id^="exclude_dir_"]');
for(var i=0, n=elements.length; i<n; i++){
var element = elements[i];
if($('#exclude_all').is(":checked")) {
element.MaterialCheckbox.check();
} else {
element.MaterialCheckbox.uncheck();
}
}
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-light_blue.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ol style="padding-left:37px;list-style:none;font-size:12px;">
<li>
<label id="label_exclude_all" name="label_exclude_all" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_all" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_all" id="exclude_all" class="mdl-checkbox__input" value="Buscar""">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Excluir tudo</span>
</label>
</li>
<li>
<label name="label_exclude_dir_0" id="label_exclude_dir_0" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_dir_0" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_dir_0" id="exclude_dir_0" class="mdl-checkbox__input" value="Atibaia">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Atibaia</span>
</label>
</li>
</ol>
</body>
</html>
When I change this:
element.MaterialCheckbox.check();
To this:
element.parentNode.MaterialCheckbox.check();
I guess you need to do for label and not the input checkbox.
All the instructions that I read about material design lite doesn't ever mention that you need to use parentNode. Anybody here can explain why?
Marcos
This is Meterial CheckBox HTML code
How check and UnCheck Using JQuery.
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="OnAccount">
<input type="checkbox" id="OnAccount" class="mdl-checkbox__input" />
<label class="mdl-checkbox__label">On Account</label>
</label>
</div>
The documentation for the Material Design Lite API never seemed to get fully completed before they put it in "limited support" and moved on to Material Components for the web. You can sift through the source code for the MDL checkbox to see that the label element is integral to the display and that the MDL checkbox functions need to be called on that element.
Below is a working snippet that targets the elements you need without the extra steps:
$(document).ready(function() {
// better to add a class to your checkbox labels and update this selector
const elems = $('[id^=label_exclude_dir_]');
$('#exclude_all').change(function() {
const checked = $(this).is(':checked');
elems.each(function() {
if (checked) {
this.MaterialCheckbox.check();
} else {
this.MaterialCheckbox.uncheck();
}
});
});
});
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-light_blue.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<ol style="padding-left:37px;list-style:none;font-size:12px;">
<li>
<label id="label_exclude_all" name="label_exclude_all" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_all" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_all" id="exclude_all" class="mdl-checkbox__input" value="Buscar">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Excluir tudo</span>
</label>
</li>
<li>
<label name="label_exclude_dir_0" id="label_exclude_dir_0" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="exclude_dir_0" style="margin-left:3px;padding-left:31px;">
<input type="checkbox" name="exclude_dir_0" id="exclude_dir_0" class="mdl-checkbox__input" value="Atibaia">
<span class="mdl-checkbox__label" style="font-size:12px;color:#757575;">Atibaia</span>
</label>
</li>
</ol>
</body>
</html>
I hope to click "Upload Files" lable to display a foreground windows which include extra content, Submit and Close buttons in a html web page.
I write the following code, but it's ugly, and orginal UI is damaged when the is shown.
Is there a good way to do that? or a good control can do that?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WiFi File Transfer</title>
<meta charset="utf-8" />
<script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>
<script src="js/user.js?isassets=1" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#UploadWindows").hide();
$("#UploadFile").click(function() {
$("#UploadWindows").show();
});
$("#Close").click(function() {
$("#UploadWindows").hide();
});
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<a href="#">
<span id="UploadFile">Upload Files</span>
</a>
</div>
<div id="UploadWindows">
<form action="" method="post" enctype="multipart/form-data">
Please select files to upload <br />
<input type="file" name="myupload" multiple="multiple" />
<br />
<input type="submit" value="Upload Files" />
<br />
<span id="Close">Close</span>
</form>
</div>
<div id="Div1">
Other Content!
</div>
</div>
</body>
</html>
BTW, I think the edit popup window of stackoverflow is very good, I don't know if there is simple way do to it.
I've got this form with bootstrap but I can't find why it's not working properly ant I've no idea why.
HEAD>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/corrections.css" rel="stylesheet" type="text/css"/>
<script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
--> code here
</body>
HTML >>
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Some label</label>
<input id="text" type="text" class="form-control" placeholder="Text here">
</div>
<button type="submit" class="btn btn-primary pull-right">Ok</button>
<div class="alert alert-danger" style="display:none">
<h4>Error</h4>
Required amount of letters is 4
</div>
<div class="success alert-success" style="display:none">
<h4>Success</h4>
You have the required amount of letters
</div>
</form>
</div>
JS >>
<script>
$(function () {
$("form").on("submit", function () {
if ($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return;
} else if ($("input").val().length > 3) {
$("div.form-group").addClass("has-success");
$("div.success").show("slow").delay(4000).hide("slow");
return;
}
});
});
</script>
the alert class shows everytime, any idea why?
The use of $("input") here is unusual. That selector will pull back all elements on the page that are <input>s, which is almost certainly not what you mean. (If there are other inputs on the page, you might get exactly what you're describing.) Use a more precise selector, like $("#text"), and maybe use debug to output the value of val().length so you know what you're evaluating.
(On a side note, "text" is not a very useful name for a text input, and your else-if seems redundant, but they probably aren't causing problems in your code.)
I'm using asp.net web forms. I have DynamicDataField with some jquery.mobile widjets:
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile- 1.3.2.min.css" />
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
<script>
function go() {
////some code
};
</script>
</head>
<div>
<div data-role="rangeslider" class="searchBlock">
<label for="range-1a">Комнат:</label>
<input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range" class="seearchSlider" />
<label for="range-1b">Rangeslider:</label>
<input name="range-1b" id="range-1b" min="0" max="50" value="100" type="range" class="seearchSlider" />
</div>
///etc, several same divs
this DynamicDataField(Search.ascx) I place on my Main.Master padge:
<%# Register Src="~/DynamicData/FieldTemplates/Search.ascx" TagPrefix="search" TagName="search" %>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<link href="/Content/MainStyle.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<title></title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</head>
<body>
<div id="left">
<div style="background: #fff">
<search:search id="menu2" runat="server"/>
</div>
</div>
</body>
The problem is: after adding
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"> </script>
all my project starts behave strange. All fonts etc are like as in jquery.mobile widjet, some javascript methods don't work. So. How can I isolate jquery.mobile-1.3.2.min.js? I want it to be used ONLY in Search.ascx.
Any suggestions? sry, i'm new in jquery:)
By default, jQuery Mobile enhances everything on the page. You can use data-enhance="false on the page body, and just use data-enhance="true" on the control that you want to enhance.
See the docs for more info.
In this case, you need to tell JQM not to to auto-initialize pages. You should do that once mobileinit fires to apply global changes, after loading jQuery and before loading jQuery mobile JS libraries.
Nevertheless, bu doing so, you will need to manually enhance JQM elements (widgets).
<head>
<!-- jQuery.js here -->
<script>
$(document).on("mobileinit", function () {
$.mobile.autoInitializePage = false;
});
</script>
<!-- jQuery Mobile.js here -->
</head>
i'm doing some tests, to do that i took a template on the kendo ui' page.
i clean it a bit to get what i want and right now, i have two div header in my html page.
i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
i've tried plenty of things but nothing seems to work correctly using jquery
here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<!--
Contenu des pages chargées par le paneau left
-->
<body>
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"
<p>recherche </p>
</div>
<div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">
<p>recherche </p>
</div>
<div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">
<p>recherche </p>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']">
<ul data-role="listview" data-type="group"
<li>Menu
<ul>
<li>m1</li>
<li>m2</li>
<li>m3</li>
</ul>
</li>
</ul>
</div>
<div class="Head" data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div class="" data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span id="compagnyName">Demo</span>
<a data-role="button" onClick="changeHead()" data-icon="drawer-button" data-align="right"></a>
</div>
</header>
</div>
<div class="HeadSearching" data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<input type="text" id="city" name="city" class="k-textbox" placeholder="Ville" data-align="center" />
<select name="country" id="country" data-align="right">
<option>France</option>
<option>Angleterre</option>
<option>Luxembourg</option>
<option>Espagne</option>
</select>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
$('.HeadSearching').remove();
</script>
<script>
function changeHead()
{
alert('header replace');
$('.head').replaceWith('.HeadSearching');
}
</script>
</body>
</html>
if someone could help me doing this correctly ..
thanks by advance ;)
Function replaceWith(newContent) as argument use HTML string. replaceWith
You can try something like:
$('.head').replaceWith($('.HeadSearching'));
For this situation maybe is better to use show/hide different div.
This works for me without the '.'
$('Head').replaceWith("HeadSearching");
For class selectors, you need to respect case. You're trying to select the element with $('.head'), but the class name is Head.
I'd suggest you always use lower-case ids and classes for simplicity.
In your case,
$('.Head').replaceWith($('.HeadSearching'));
should work, however you're removing the
element you're trying to replace $('.Head') with:
var app = new kendo.mobile.Application(document.body);
$('.HeadSearching').remove();
So if you want to replace the .Head element with the .HeadSearching element, you need to remove the second line that removes all .HeadSearching elements.
If you want to hide .HeadSearching initially, then you should use $(".HeadSearching").hide() instead, and when you want to replace it, you could simply do
$(".Head").hide()
$(".HeadSearching").show()
and vice versa.