Here is my issue. I am unable to trigger the checkbox select on firing an event/Function when ever the function is called. The input has to be selected like below
TS code:
check(){
this.selectAll = true;
let elements = this.hostElement.nativeElement.querySelectorAll('deltha');
for(var i=0;i<elements.length;i++){
elements[i].selected= this.selectAll;
}
}
HTML code:
<input type="checkbox" id="selectAll" [(ngModel)]="selectAll" (change)="selectAllFiles($event)" class="form-check-input deltha">
Whenever the function is called, it has to trigger and this check box has to be checked here. I am not using and reactive/template form approach as this has to be a unique one. When I am trying the above function code, it's not working and it is not giving any error as well...
I'm not really sure what's the issue here. You'll need to provide more code so we could try to reproduce your problem.
From what i see here when you change this.selectAll to true then the checkbox is selected (you don't need to do this by applying anything to the element) - you can see this in the stackbliz demo - https://stackblitz.com/edit/checkbox-selection-1?file=src/app/app.component.ts
please add more information to your question.
Related
I am facing problem because I have a checkbox inside a div and I want to call a function in both the cases: if we change the checkbox value or click the div.
Now the problem is that, When I click the checkbox, The event is fired twice and I am not getting expected result.
<div ng-click="checkEntry(config.id)"><input type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></div>
$scope.checkEntry = function(id){
var idx = $scope.someArray.indexOf(id);
if(idx === -1){
$scope.someArray.push(id);
}else{
$scope.someArray.splice(idx, 1);
}
}
Now If i click div, it works fine and the checkbox gets selected. But if i click the checkBox, the function is called twice, and it doesn't work as expected.
Please help me with a solution
You don't need two event handler for two identical events.When you click on the input, the div will be clicked as well. so you just need to remove ng-change from your code.
<div ng-click="checkEntry(config.id)">test
<input type="checkbox" ng-model="modelCheckbox" ng-checked="checked">
and in your controller:
$scope.checked = true;
$scope.checkEntry = function(id){
$scope.checked = !$scope.checked;
}
Look at this plunker
Checkbox is situated inside of that div, so when you click checkbox you are actually clicking also on div.
Actually, in your case you can remove ng-change attribute from checkbox and it will still work, because function will be called via click on div anyway. But that is not correct way to work with checkboxes!
First question here is if you really need that div?
I would rather use label instead:
<label for="my-checkbox"><input id="my-checkbox" type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></label>
In such case it will work fine, you just need to write proper CSS to style that label correctly. This is the best and the most correct solution.
I have jquery code that has the ability to set all checkboxes to 'checked' state on the click of a 'check all' checkbox. However, I would like to initially, start a html page by already having all checkboxes checked without having to click on that 'check all' checkbox. Please bear in mind, though, that I would like to keep the 'check all' checkbox since it has the ability to uncheck all checkboxes as well.
Here's my jquery code :
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
});
If you want to have all your checkboxes checked the moment the page is loaded without the need to click anything, use:
$(document).ready(function(){
$("input:checkbox").prop("checked", "true");
});
Or just generate your HTML input tag like so:
<input type="checkbox" checked="checked" />
Hope this helps!
You could place your checkAll function outside of your click function, call it once the page load and when you click on the check all button
$(document).ready(function(){
checkAll(true);
$('.chk_boxes').click(function(){
var chk = $(this).attr('checked')?true:false;
checkAll(chk)
});
function checkAll(isCheck){
$('.chk_boxes1').attr('checked',isCheck);
}
})
I also like #Univ approach.
Change your original function to:
$('.chk_boxes').click(chkAll());
Create a new function:
function chkAll(){
var chk = $(this).attr('checked')?true:false;
$('.chk_boxes1').attr('checked',chk);
}
Call the new function when document are ready:
$(document).ready(function(){
chkAll();
})
I would just use html attributes
<input name="name" id="id" type="checkbox" checked="checked">
I wouldn't recommend using javascript to set these initial values because it will unnecessarily waste resources in the client machines.
I have some items to be selected,they are checkboxes with their certain titles in a table. I want to onclick on an item(I mean each "td") then the function do its job but besides I want the checkbox of that selected "td" t be checked. How can I do it with javascript?
note:I am learning javascript so please don't answer with a jquery solution.
the code below is an example of each items
<td id="1" onclick="chb('1')" ><input type="checkbox" />title</td>
This is pure JS to select a check box. You need to give your check box an Id (for example 'check1') and run the below code inside the function you call in the click event.
document.getElementById("check1").checked = true;
Actually I didn't understand what you told. But i think you want the checkbox to be checked already. Then use checked in <input> Like this : <input type="checkbox" checked>or You can use document.getElementById("check1").checked = true;
I have googled and looked throughout the whole documentation and could not figure out why value of input text is not shown. I am using FireFox latest version and below is what I have done so far.
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
In regular html or php page we can give value="300" to set default value, but in EasyUI, it is not possible. So I was thinking possible alternative like below:
<script>
var m = '300';
document.getElementById("d_amount").value.innerHTML=m;
</script>
Nothing is shown and I am not getting any error. Any EasyUI expert, please help me.
NOTE: this input field is inside the dialog
To set the default value, you have to set the value attribute. However, that does not necessarily update the value property so you need to do both. So given:
<input name="amount" class="easyui-validatebox" id="d_amount" value="">
set the default value by setting the value attribute:
var input = document.getElementById('d_amount')
input.setAttribute('value', 'whatever');
now set the value property:
input.value = 'whatever';
Note that you can also get a reference to the input as a member of the form that it's in:
var input = document.formName.d_amount;
Use the below code
$("#d_amount").numberbox({
min:0,
precision:2,
value:300
})
Reference : numberbox
Or try this one
$("#d_amount").textbox({
buttonText:'Search',
iconCls:'icon-man',
iconAlign:'left',
value:"300"
});
Reference : textbox
use this code to set the value inside $(document).ready(function(){}
....
$("#d_amount").numberbox('setValue','300');
....
if still not working, just try to set name and id as the same name and id
<input name="d_amount" class="easyui-validatebox" id="d_amount" value="">
I am always working with this numberbox and it's working
I have found your thread because I am also having the same issue and I have just across this thing today. Your case is a little bit different (maybe) then my case because you want to set the default which can be changed by the user later (I believe). In my case, the value will be fixed (will not be changed) so I have applied a trick and hopefully it can give some ideas to you and others who are having same issue. Please refer below:
In first page says pageA.php:
<select name="myThing" id="myThing">
<option value="Your Desired Value" selected="selected">Something</option>
</select>
Still in the same page, under your $(document).ready( function(){ put the code below:
$("#myThing").val($("#myThing option:first").val());
That code is to make sure your desired value appears at the first row in the drop down. I say this because in EasyUI it seems when I use drop down and put single option, the first row will be blank and the second row will hold your input. So that is the trick to ensure your desired value appears on top and selected. Put the select under the form then during normal post, you will be able to get the value of it in the posted page. Enjoy. Thank you.
Suggestion: if your value can be changed by user, use placeholder and you can hide the default value from user using my trick.
try this
document.getElementById("d_amount").value=m;
you don't need innerHTML
I found the answer here. The trick is to use the code inside $(function(){});
$(function(){
var m=300;
$('#d_amount').textbox('setValue', m);
});
I too had this problem and it was solved using the following
First my input was in the form like this:
<input name="hostFirstName" id="hostFirstName" class="easyui-textbox">
I needed to load content from the db then pre-fill the input with this data so the user could edit the content.
I used the following javascript.
NOTE: i didn't hide this away inside an anonymous function() and it is working. I tested this first from the F12 console to make sure it was working before changing my code.
//populate with existing data
$('#hostFirstName').textbox('setValue', "Is this working?");
The docs on jeasyui.com don't provide this example when you look at the textbox api reference. But they do provide an example when looking at the combobox (http://www.jeasyui.com/documentation/index.php#) the combobox and textbox use the same setValue method.
Hopefully this works for you like it does for me.
So I have the js-hint on my file, as well as the foldFunction
I don't want it to be an extra key set, I'd rather have it in my options panel to turn them on or off. Which brings to me to the js-hint part I want it to run all the time, instead of only when it turns on for one word.
Has anyone who has experience with this had luck on doing this? I already get how I'm going to get the foldFunction I believe:
extraKeys: { "Ctrl-Q": function (cm) { CollapseFunc(cm, cm.getCursor().line); },"Ctrl-Space": "autocomplete" }
Turning that to this:
var a= document.getElementById('checkmark');
if(a.checked === true){
CodeMirror.defineOptions...
}
I'm not sure how to further this as I'm not positive that defining the Option foldGutter to false will work as its altered after the page has load.
Does anyone have any suggestions?
After code mirror is instantiated you can enable or disable foldGutter using the codemirror setOption method. The following codemirror event handler will fire whenever new input is read from the hidden text field. If the checkbox is checked and the autocomplete menu is not already open, the execCommand method will be fired opening the autocomplete menu. This will result in hints as you type. I've added this to my implementation of codemirror and will test it out.
<label><input type="checkbox" id="AutoCompleteEnabled" /> Enable Autocomplete </label>
<label><input type="checkbox" id="FoldGutterEnabled" /> Enable Code Folding </label>
<script>
$(function(){
$("#FoldGutterEnabled").on("click", function(){
CM.setOption("foldGutter", this.checked);
});
CM.on("inputRead", function(cm){
// Show the autocomplete menu when input is changed if the Enable Auto Hint checkbox is checked and the autocomplete menu is not already open.
if($("#AutocompleteEnabled:checked").length==1 && $(".CodeMirror-hints").length==0) CM.execCommand("autocomplete");
});
});
</script>
Let me know if you were looking for something different.