ngChecked to deselect checkboxes - javascript

Is it possible to use ngChecked on a checkbox that you want to have deselect all other checked checkboxes. Below is an example of what I'd like to do except that the functionality selects all I want to deselect all
http://plnkr.co/edit/iseIU1OIjocW4nXTN6ru?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-example54-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
</head>
<body ng-app="">
<input id="checkSlave" type="checkbox" ng-checked="master"><br />
<input id="checkSlave" type="checkbox" ng-checked="master"><br />
<input id="checkSlave" type="checkbox" ng-checked="master"><br />
<hr />
<input type="checkbox" ng-model="master"> <b>Check me to select all:</b><br />
</body>
</html>

Just do ! (not) on the ng-checked to achieve the opposite
<input id="checkSlave" type="checkbox" ng-checked="!master"><br />

Related

Select All? What am I doing wrong?

I'm trying to get this Select All code to work but I don't know what I'm doing wrong. I found the code here
http://jsfiddle.net/L6e72fpv/
I'm not sure if it's a compatibility issue or if I'm putting the code together wrong. It works fine on the jsfiddle but not on an full page.
Here is the way I have it in a page.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
<title>TEST</title>
<script>
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
</script>
</head>
<body>
<form action="#">
<p>
<label>
<input type="checkbox" id="checkAll" /> Check all</label>
</p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p>
<label>
<input type="checkbox" /> Option 1</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 2</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 3</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 4</label>
</p>
</fieldset>
</form>
</body>
</html>
</body>
</html>
Looks like your'e not including the jQuery Library. Without loading it, jQuery won't work. You also closed your body and html tag twice.
Try this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" charset="utf-8" />
<title>TEST</title>
</head>
<body>
<form action="#">
<p>
<label>
<input type="checkbox" id="checkAll" /> Check all</label>
</p>
<fieldset>
<legend>Loads of checkboxes</legend>
<p>
<label>
<input type="checkbox" /> Option 1</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 2</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 3</label>
</p>
<p>
<label>
<input type="checkbox" /> Option 4</label>
</p>
</fieldset>
</form>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$("#checkAll").change(function () {
$("input:checkbox").prop('checked', $(this).prop("checked"));
});
</script>
</body>
</html>
What I've done is include jQuery
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
and added your script after loading it. It works fine now!

Access radio button value from iFrame?

I have a main-page with several separate iFrames including radio-buttons.
I want to validate the choices and because of that need the values of specific radio-button choices.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>...</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$('#validate').click(function() {
alert('Value ' + $('#legitimation').contents().find('input[name="group_1"]').val());
});
</script>
</head>
<body>
<iframe id="legitimation" name="legitimation" src="Legitimation.html" width="300" height="800">
<p>Your browser does not support iframes.</p>
</iframe>
<input type="button" id='validate' name='validate' value='VALIDATE' />
</body>
</html>
inside my Legitimation.html i have several radio buttons (grouped up):
<form action="#" id="unique_id" class="productFilter">
<fieldset id="step1" class="step1 option0">
<legend>Legitimation</legend>
<p>
<input id="question_1" name="group_1" type="radio" value="1"/>
<label for="question_1">Unidentifiziert</label>
</p>
<p>
<input id="question_2" name="group_1" type="radio" value="2"/>
<label for="question_2">Unlegitimiert</label>
</p>
<p>
<input id="question_3" name="group_1" type="radio" value="3"/>
<label for="question_3">Legitimiert</label>
</p>
</fieldset> [...]
I want to get feedback on which of the radio buttons was clicked, but i just can't seem to find a way on how to do that...
Any help would be appreciated.

How to lanuch a post using javascript or jquery when I click a button?

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.

prev() not working in my code

I have a button and on the click of it, I want to have the value of product_id which is its sibling but following code isn't working. It is giving me undefined. Fiddle Html is mostly fixed i can't give any classes
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prev demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form class="commerce-add-to-cart commerce-cart-add-to-cart-form-3" action="/drupal_commerce/" method="post" id="commerce-cart-add-to-cart-form-3" accept-charset="UTF-8">
<div>
<input type="hidden" name="product_id" value="3">
<input type="hidden" name="form_build_id" value="form-WLgRLYXPHDHNkH-vTSrERT4DGaqutn88pAlta_eJNig">
<input type="hidden" name="form_token" value="UhnJe2M-N6lxx2LdqBvWm6EUbB7gD0Uv3r3OaTc_s1Q">
<input type="hidden" name="form_id" value="commerce_cart_add_to_cart_form_3">
<div id="edit-line-item-fields--2" class="form-wrapper"></div>
<input type="hidden" name="quantity" value="1">
<input class="button01 form-submit" type="submit" id="edit-submit--3" name="op" value="Add to cart">
</div>
</form>
<script>
$('.commerce-add-to-cart input[type="submit"]').on('click', function(event){
console.log($(this).prev('input[name=product_id]').val())
});
</script>
</body>
</html>

Why is the 'label' tag not working in ie8

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
<label for="ch2">check2</label>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showValues() {
alert(this.value);
}
$( "input[type='checkbox']" ).on( "click", showValues );
</script>
it work like below picture in ie10 when you click the "check1" text
but it not working in ie8
Move the <script> tags inside the <body>.
I think you want to register your clicks on the labels instead of the checkboxes too (since you are not actually displaying the checkboxes). Try this:
function showValues() {
alert($("#"+$(this).attr("for")).val());
}
$("label").on("click", showValues);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
function showValues() {
alert(this.value);
}
$( "input[type='checkbox']" ).on( "click", showValues );
});
</script>
</head>
<body>
<input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
<label for="ch2">check2</label>
</body>
</html>
Where is $(document).ready();
there are several items within the code
that result in 'browser guesses' as to what you actually want.
Like having both check boxes having the same name
they are NOT radio buttons so the names should be unique
A input attribute ID="..." is for CSS definitions, not for input identification
<input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
<label for="ch2">check2</label>
To greatly help the browser, the code should look more like:
<label>
check1
<input type="checkbox" name="check1" style="display:none;" value="check1" />
</label>
<label>
check2
<input type="checkbox" name="check2" style="display:none;" value="check2" />
</label>

Categories

Resources