I know there are lot of examples here that shows how to count the checked checkboxes but for some reason I'm unable to make this work.
What I'm trying to do is that when at least one checkbox in my page is checked a button should be enable or disable if none of the checkboxes are checked.
The thing is even that I implemented the following code, the count of checked checkboxes is always 0, I'm not sure what I'm missing.
Primefaces component:
<p:column id="idSelectBox" selectionMode="multiple" style="width:68px" />
JQuery Code:
function countChecked() {
var n = $("input:checkbox:checked").length;
alert('Count: ' + n);
}
$(":checkbox").click(countChecked);
Hope you can help me out!
UPDATE 1:
I did a little more research and the Primefaces component does not render to HTML checkboxes elements, its outputs is a set of divs and classes:
<td class="ui-selection-column">
<div class="ui-dt-c">
<div class="ui-radiobutton ui-widget">
<div class="ui-radiobutton-box ui-widget ui-corner-all ui-radiobutton-relative ui-state-default">
<span class="ui-radiobutton-icon"></span>
</div>
</div>
</div>
</td>
So I'm still trying to figure out how I can detect whether the checkbox was checked or not.
PrimeFaces 3.1 datatable client side api has getSelectedRowsCount() method you can use to see if there are any selected rows.
you have to use the attribute selector see http://api.jquery.com/category/selectors/attribute-selectors/
var n = $("input[type=checkbox][checked]").length;
Related
I'm using element-ui and I have no idea how to make it work. I have the following code:
<div v-for="(solution, s_index) in scope.row.arrayDefectiveActions"
:key="`${requirementTemplateTypeIndex}.${requirementExtendedItemIndex}.${s_index}`"
style="display: inline-block;" class="p-sm">
<el-checkbox v-model="solution.checkActionTaken"
:disabled="!scope.row.checkDefectiveItem"
#change="articleChanged(requirementExtendedItem)">
</el-checkbox>
</div>
My question is how can I transform this checkbox into radio buttons, because I tried to use the exact same code but changed only the checkbox and I can select all of them without unchecking the others
You must add :class="{'active':radio===item.id}" to the v-for iterator and use <el-radio v-model="radio" :label="item.id">.
Here you can find a working example.
Best regards,
Brhaka
Have a look to the documentation on how to use the proper component.
el-checkbox is for checkboxes
el-radio for radios
Documentation: https://element.eleme.cn/#/fr-FR/component/radio
I have an angularjs app. I have a checkbox in my html :
<input ng-true-value="Paused" ng-model="paused" type="checkbox">Show Paused
When I click this checkbox it should only display the elements having the class='paused'.
for eg let's say this is my view:
<span class="paused">1</span>
<span class="notpaused">2</span>
<span class="notpaused">3</span>
So when I click on Show Paused I want that only the <span> with class="paused" be visible in the view. other elements should be hidden from the view. I know how to use filters in angularjs but I'm not able to figure out how to do it when we have to filter by class name.
Any suggestions on how can I do it?
If you are changing the value of pause variable using your ng-model, it will give result as true or false.
so, you can use it like
<span ng-if="paused">1</span>
<span ng-if="!paused">2</span>
<span ng-if="!paused">3</span>
or with your logic.
I got it to work like this :
<input ng-true-value="'Paused'" ng-false-value="''" ng-model="paused"
type="checkbox">Show Paused
<div ng-repeat="x in users|filter:paused" >
//tip for beginners > ng-class="{'paused': x.stat == 'Paused',
'notpaused': x.stat == 'notPaused'}" assigns the class paused/notpaused
and {{x.id}} prints the value 1.
<span class="paused">1</span>
<span class="notpaused">2</span>
<span class="notpaused">3</span>
</div>
Earlier when I used to set ng-true-value="Paused" it would always return true hence my filter was not working as the value of ng-model="paused" would evaluate to true/false instead of Paused when the checkbox is checked. But when I included the single quotes like this : ng-true-value="'Paused'" , my filter is now working perfectly. Hope this helps somebody
I have horizontal jQuery checkbox. It should display some text when it is clicked and remove the text when it is clicked again and unchecked. However, when i first load the page and click on the box nothing happens. Then when i click it again to uncheck the text appears. It seems the opposite behaviour of what i expect is going on. Here is the code:
(I can solve this problem by simply inverting the boolean sign but i want to understand why this is happening).
<form>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a">
<label for="checkbox-h-2a" onclick="onfilter()">Vegetarian</label>
</fieldset>
</form>
<script>
function onfilter(){
if ($("#checkbox-h-2a").prop('checked')){
document.getElementById("hehe").innerHTML = "Yo there";
}
if (!($("#checkbox-h-2a").prop('checked'))){
document.getElementById("hehe").innerHTML = "";
}
}
</script>
You're already loading jQuery , so just use jQuery for everything - it is much easier , works better, really the only downside to jQUery is having to load it - and you're already doing that. So I would suggest using something like this:
$(function(){
$(document).on('click', '#checkbox-h-2a', function(){
if ( $(this).is(':checked') ) {
// Do stuff
}
else{
//Do stuff
}
});
});
Also, I hope you are actually closing your input element in your HTML , and that this is just a typo in your question
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
try:
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Select your type of Restaurant:</legend>
<label for="checkbox-h-2a" >Vegetarian
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a" />
</label>
</fieldset>
see how the label goes around the checkbox? also you can get rid on the inline function in HTML with the jQuery I provided
EDIT:
2 problems - one you selectd jQuery 1.6 , to you .on() you need a newer version , if you must use old jQuery let me know ,
the other problem is that all jQuery code must be wrapped in
$(document).ready(function(){
/// code here
});
or for short:
$(function(){
// code here
});
The problem is at the time of clicking on the label, the checkbox's checked has not been changed, so you have to toggle the logic (although it looks weird) or attach the handler to the onchange event of the checkbox input instead:
<!-- add onchange event handler -->
<input type="checkbox" name="checkbox-h-2a" id="checkbox-h-2a"
onchange="onfilter()"/>
<!-- and remove the click handler -->
<label for="checkbox-h-2a">Vegetarian</label>
Demo.
It involves how a label works, when clicking on the label, it looks for the attached input element via the for attribute and trying to change the appropriate property (checked for checkbox, radio, ...) or focusing the element (for textbox fields). So at the clicking time, it processes/calls your handler first. Hence the problem.
Note that this answer just fixes the issue, not trying to improve your code.
This is a bit of a long question so please bear with me guys.
I needed to make a form submit automatically when a checkbox was ticked. So far I have the code below and it works perfectly. The form must submit when the check box is either checked or unchecked. There is some PHP that reads a database entry and shows the appropriate status (checked or unchecked) on load.
<form method="post" id="edituser" class="user-forms" action="--some php here--">
<input class="lesson" value="l101" name="flesson" type="checkbox" />
</form>
<script>
$('.lesson').change(function() {
$('.user-forms').submit();
});
</script>
However, when I introduce a fancy checkbox script which turns checkboxes into sliders it no longer works. The checkbox jQuery script is below:
<script src="'.get_bloginfo('stylesheet_directory').'/jquery/checkboxes.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("input[type=checkbox]").tzCheckbox({labels:["Enable","Disable"]});
});
</script>
The contents of the checkboxes.js called to above is as follows:
(function($){
$.fn.tzCheckbox = function(options){
// Default On / Off labels:
options = $.extend({
labels : ['ON','OFF']
},options);
return this.each(function(){
var originalCheckBox = $(this),
labels = [];
// Checking for the data-on / data-off HTML5 data attributes:
if(originalCheckBox.data('on')){
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;
// Creating the new checkbox markup:
var checkBox = $('<span>',{
className : 'tzCheckBox '+(this.checked?'checked':''),
html: '<span class="tzCBContent">'+labels[this.checked?0:1]+
'</span><span class="tzCBPart"></span>'
});
// Inserting the new checkbox, and hiding the original:
checkBox.insertAfter(originalCheckBox.hide());
checkBox.click(function(){
checkBox.toggleClass('checked');
var isChecked = checkBox.hasClass('checked');
// Synchronizing the original checkbox:
originalCheckBox.attr('checked',isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
});
// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change',function(){
checkBox.click();
});
});
};
})(jQuery);
There is also some CSS that accompanies this script but I am leaving it out as it is not important.
Finally, this is what the jQuery script does to the checkbox:
<input id="on_off_on" class="lesson" value="lesson11-1" name="forexadvanced[]" type="checkbox" style="display: none; ">
<span classname="tzCheckBox checked" class=""><span class="tzCBContent">Disable</span><span class="tzCBPart"></span></span>
When the checkboxes are changed into sliders the .change() function no longer detects the change in the checkboxes status.
How can I make the .change() function work or is their an alternative function I can use?
This plugin changes your checkboxes to span elements and hides the actual checkboxes themselves. Thus, when you click on them, nothing happens. Since span elements don't have onchange events, you can't bind change events to these.
However, span elements do have click events, meaning that you could instead bind a click event to the generated spans, using Firebug or Chrome Debugger to locate the correct element to bind to.
Your click-handler can then take the same action your change event would normally take if the plugin weren't being used.
Here is an example:
HTML (Source):
<!-- This is a checkbox BEFORE running the code that transforms the checkboxes
into sliders -->
<li>
<label for="pelda1">Opció 1:</label>
<input class="pelda" type="checkbox" id="pelda1" name="pelda1" />
</li>
HTML (Generated From Chrome Debugger):
NOTE: This is the generated HTML after running the JavaScript that converts checkboxes to sliders! You must bind your click event AFTER this code is generated.
<li>
<label for="pelda1">Option 1:</label>
<!-- The hidden checkbox -->
<input class="pelda" type="checkbox" id="pelda1" name="pelda1" style="display: none; " />
<!-- the "checked" class on the span gets changed when you toggle the slider
if it's there, then it's checked. This is what you're users are actually
changing.
-->
<span class="tzCheckBox checked">
<span class="tzCBContent">active</span>
<span class="tzCBPart"></span>
</span>
</li>
JavaScript:
NOTE: This must be bound AFTER converting the checkboxes to sliders. If you try it before, the HTML won't yet exist in the DOM!
$('.tzCheckBox').click(function() {
// alert the value of the hidden checkbox
alert( $('#pelda1').attr("checked") );
// submit your form here
});
Listen for change like this:
$('.lesson').bind("tzCheckboxChange",function() {
$('.user-forms').submit();
});
Modify the plugin by adding the line:
$(originalCheckBox).trigger("tzCheckboxChange");
after
checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
This way, anytime you use this plugin, you can listen for tzCheckboxChange instead of just change. I don't really know what's going on with the plugin, but seems kinda funky for it to be listening for a change event when it would only be fired through trigger (unless it doesn't hide the original checkbox).
How can I select a row in icefaces datatable using radio button?
I tried with the following
<h:selectOneRadio styleClass="none" valueChangeListener="#{bean.setSelectedItem}"
onclick="dataTableSelectOneRadio(this);">
<f:selectItem itemValue="null" />
</h:selectOneRadio>
And my javascript
function dataTableSelectOneRadio(radio) {
var id = radio.name.substring(radio.name.lastIndexOf(':'));
var el = radio.form.elements;
for (var i = 0; i < el.length; i++) {
if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
el[i].checked = false;
}
}
radio.checked = true;
}
In another post I got an answer that I should replace form.name with form.id. However after that I am getting error
radio.form is undefined
var elements = radio.form.elements;
Could someone help me how to resolve this issue.
I would like to select one row in icefaces datatable using radio button.
Any help is highly appreciable.
Thanks
Posting my generated html source
See here is jsf code for radio button
<h:selectOneRadio valueChangeListener="#{bean.setSelectedItem}"
id="reqselect" onclick="dataTableSelectOneRadio(this);">
<f:selectItem itemValue="null" />
</h:selectOneRadio>
My heartfelt apologies for posting in correct html source, I was testing some thing else and thus wrong source got posted. Pasted below is my correct html source, kindly see if you could find something.
You should use the ice:selectOneRadio with spread layout:
<ice:selectOneRadio id="myRadioId" layout="spread" ... />
<ice:dataTable ... >
<ice:column ...>
<ice:radio for="myRadioId" ... />
</ice:column>
...
</ice:dataTable>
Here's how the generated HTML of each radio button look like:
<table id="crud:tab_cr:9:_id53" border="0" onkeypress="dataTableSelectOneRadio(this);">
<tr>
<td>
<input type="radio" name="crud:tab_cr:9:_id53" id="crud:tab_cr:9:_id53:_1" value="null" onkeypress="dataTableSelectOneRadio(this);Ice.util.radioCheckboxEnter(form,this,event);" />
<label for="crud:tab_cr:9:_id53:_1">null</label>
</td>
</tr>
</table>
So IceFaces is apparently rendering a whole HTML table around the radio button and putting the JS function on the <table> as well. The JS function clearly doesn't belong there at all (apart from the fact that onkeypress is incorrect, it should be onclick).
The <h:selectOneRadio> doesn't render a whole table around by default. This can only mean that you were actually using <ice:selectOneRadio> or that the IceFaces replaced the standard renderer for <h:selectOneRadio>. You need to fix it in this corner. Either replace by <h:selectOneRadio> or report a bug to IceFaces guys that their radio renderer is incorrectly putting the JS function on <table> element as well.