I find a checkbox function from the web as below, how to remove checkbox if click Uncheck, maybe need to rewrite the javascript.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
type="text/javascript"
src="//code.jquery.com/jquery-1.9.1.js"
></script>
</head>
<body>
<div id="div1">
<input type="button" id="btnDiv1" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Mark
<input type="checkbox" class="check" />Frank</div>
<div id="div2">
<input type="button" id="btnDiv2" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />John
<input type="checkbox" class="check" />Travis
<input type="checkbox" class="check" />Matt</div>
<div id="div3">
<input type="button" id="btnDiv3" class="select-all" value="Check / Uncheck" />
<input type="checkbox" class="check" />Lee
<input type="checkbox" class="check" />Charles</div>
<script type="text/javascript">
$('.select-all').on('click', function ()
{
$(this).nextAll('.check').prop('checked', true);
});
</script>
</body>
</html>
Related
I'm quite new AMPscript, the problem I'm facing is I want to store the radio button value into a variable then I want to display that variable please someone help me.
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Radio Button</title>
</head>
<body>
<form
id="dashform"
action="%%=RequestParameter('PAGEURL')=%%"
method="post"
>
<div>
<input type="radio" name="option" value="reason_1" id="reason_1" />
<label for="reason_1">I never signed up, or didn't realize I had signed up, for your email list.</label>
</div>
<div>
<input type="radio" name="option" value="reason_2" id="reason_2" />
<label for="reason_2">Your content isn't relevant to me.</label>
</div>
<p>
<button id="btn">Select your option</button>
</p>
</form>
</body>
</html>
I am looking for something like this:
<input type="text" ng-model="stuff1">
<input type="checkbox" ng-model="stuff">
<div ng-class="{'stuff': stuff};stuff1">Stuff!!!</div>
However this doesn't work
You can achieve what you want by two ways:
Using the array notation of ngClass:
<div ng-class="[{'stuff': stuff}, stuff1]">Test</div>
Separating class and ngClassdirective, as below:
<div class="{{stuff1}}" ng-class="{'stuff': stuff}">Stuff!!!</div>
Take a look:
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>
<body>
<input type="text" ng-model="stuff1">
<input type="checkbox" ng-model="stuff">
<div ng-class="[{'text-success': stuff}, stuff1]">Stuff1!!!</div>
<div class="{{stuff1}}" ng-class="{'text-danger': stuff}">Stuff2!!!</div>
</body>
</html>
I am a newbie on reactjs. I was playing with multiple components for creating a form , but got an error which i am not able to solve.
I searched thoroughly, but couldnt find an answer.
Please help
The errors are the following:
TypeError: erroneousLine is undefined in JSXTransformer-0.12.2.js
ReferenceError: Login is not defined JSXTransformer-0.12.2.js:
login.jsx
var Login = React.createClass({
render: function () {
return (
<div className="container"><h2>Library</h2>
<form role="form" action="first.ejs">
<textField/>
<div className="form-group">
<label for="email">UserId:</label>
<input type="email" className="form-control" id="email" placeholder="Enter email"/>
</div>
<div className="form-group">
<label for="pwd">Password:</label>
<input type="password" className="form-control" id="pwd" placeholder="Enter password" />
</div>
<div className="checkbox">
<label><input type="checkbox"/> Remember me</label>
</div>
<button type="submit" className="btn btn-default">Submit</button>
</form></div>
);
}
});
text_field.jsx
var textField=React.createClass({
render: function(){
return (<input type="text" name="username"/>);
}
});
html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script type="text/jsx" src="src/text_field.jsx"></script>
<script type="text/jsx" src="src/login.jsx"></script>
<script type="text/jsx">
React.render(<Login/>, document.body);
</script>
</body>
</html>
There is a typo in your last script tag. The type should be javascript, not jsx.
<script type="text/javascript">
React.render(<Login/>, document.body);
</script>
I want to uncheck the two checkbox on startup, and allow user to select only one check box at a time. Can I do it only using from ng-... attribute?
I am trying the following code
<div style="border:1px solid">
<label><input type="checkbox" ng-checked="!Titleshine_check" ng-model="blink_check">Blink</label>
(OR)
<label><input type="checkbox" ng-checked="!blink_check" ng-model="Titleshine_check">Shine</label>
<br>
</div>
http://plnkr.co/edit/2BLssmNTB5r8LjeGZf65?p=preview
Here you got full example
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div style="border:1px solid">
select type:
<form>
<input type="radio" name="opt1" ng-change="radioValue" ng-model="radioValue" value="this" unchecked> this
<br>
<input type="radio" name="opt2" ng-change="radioValue" ng-model="radioValue" value="that" unchecked> that
</form>
<span ng-bind="radioValue"></span>
</div>
</body>
</html>
and js:
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.radioValue="empty";
});
If you really, really want the checkboxes you can do it like this:
http://plnkr.co/edit/ukDKjBZsp7AtY5UiIhBj?p=preview
<div style="border:1px solid">
<label><input type="checkbox" ng-model="blink_check">Blink</label>
(OR)
<label><input type="checkbox" ng-click="blink_check = !blink_check" ng-model="!blink_check" >Shine</label>
<br>
</div>
I am new to AngularJS and I am working on a project. I just created a login form, created a module and a controller. But the controller is not working fine.
Here is the code of the view.
<!DOCTYPE html>
<html lang="en" ng-app="loginApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>UltraServe</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="fonts/roboto.css" type="text/css" rel="stylesheet">
<link href="fonts/roboto-light.css" type="text/css" rel="stylesheet">
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
<script type="text/javascript" src="Js/Controller/login.js"></script>
<link href="css/slider.css" rel="stylesheet" type="text/css">
<link href="login_style.css" rel="stylesheet" type="text/css">
</head>
<body ng-controller="LoginAppController">
<header>
<div class="container">
<div class="logo"> <img src="images/logo.png" /> </div>
<!--logo end-->
</div>
</header>
<section class="page-wrap">
<div class="container">
<form class="form-horizontal login-form" role="form">
<h2>Sign in to your account</h2>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" placeholder="Email" ng-model="email" required /> {{email}}
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password" ng-model="password" required /> {{password}}
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default red" ng-click="Click()">Sign in</button>
</div>
</div>
</form>
</div>
</section>
</body>
</html>
Now here I create module and controller which is not working fine.
var loginApp = angular.module('loginApp', []);
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function (name) {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
}
I have gave the ng-app="loginApp" in the view and ng-controller="LoginAppController"
But it is not working fine. Please help me to sort it out. Thanks in advance.
Try this.
Change your form tag as
<form class="form-horizontal login-form" role="form" ng-submit="Click()">
And your submit button
<button type="submit" class="btn btn-default red">Sign in</button>
And in your controller your forgot to put a ) at the end of your controller
loginApp.controller('LoginAppController', function ($scope) {
$scope.Click = function () {
alert("Email: " + $scope.email + ", Password: " + $scope.password);
}
});
just do following changes
$scope.Click = function()
{
//your logic
}