Element Checkbox
JXG.GeometryElement,JXG.CoordsElement
↳ JXG.Text
↳ Text
↳ Checkbox
This element is used to provide a constructor for special texts containing a form checkbox element. For this element, the attribute "display" has to have the value 'html' (which is the default).
Setting a CSS class: The attribute cssClass affects the HTML div element that contains the checkbox element. To change the CSS properties of the HTML checkbox element a selector of the form .mycheck > checkbox { ... } has to be used. See the analog example for buttons: Button.
Access the checkbox element with JavaScript:
The underlying HTML checkbox element can be accessed through the sub-object 'rendNodeCheck', e.g. to
add event listeners.
Defined in: checkbox.js.
Extends
Text.
| Constructor Attributes | Constructor Name and Description |
|---|---|
| Field Attributes | Field Name and Description |
|---|---|
|
Control the attribute "checked" of the HTML checkbox.
|
|
|
Control the attribute "disabled" of the HTML checkbox.
|
| Method Attributes | Method Name and Description |
|---|---|
|
Value()
Returns the value of the checkbox element
|
- Methods borrowed from class JXG.Text:
- _createFctUpdateText, _setText, bounds, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval
- Events borrowed from class JXG.GeometryElement:
- attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
Checkbox
-
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create
with type "checkbox".
- Possible parent array combinations are:
-
{number|function} x
{number|function} y
{String|function} label
- Parent elements for checkbox elements.
x and y are the coordinates of the lower left corner of the text box. The position of the text is fixed, x and y are numbers. The position is variable if x or y are functions.
The label of the input element may be given as string or function.
The value of the checkbox can be controlled with the attribute checked
The HTML node can be accessed with element.rendNodeCheckbox
- Examples:
// Create a checkbox element at position [0,3].
var checkbox = board.create('checkbox', [0, 3, 'Change Y'], {});
var p = board.create('point', [
function(){ return 0.5;}, // X-coordinate
function() {
y = 0.5;
if (checkbox.Value()) {
y += 0.5;
}
return y;
}]);
The checkbox can be supplied with custom-made events by using the property rendNodeCheckbox.
var checkbox = board.create('checkbox', [0, 4, 'Click me']),
p = board.create('point', [1, 1]);
JXG.addEvent(checkbox.rendNodeCheckbox, 'change', function() {
if (this.Value()) {
p.moveTo([4, 1]);
} else {
p.moveTo([1, 1]);
}
}, checkbox);
var i1 = board.create('input', [1, 5, 'sin(x)', 'f(x)='], {cssStyle: 'width:4em', maxlength: 2});
var c1 = board.create('checkbox', [1, 3, 'label 1'], {});
var b1 = board.create('button', [1, 1, 'Change texts', function () {
i1.setText('g(x)=');
i1.set('cos(x)');
c1.setText('label 2');
b1.setText('Texts are changed');
}],
{cssStyle: 'width:200px'});
Attribute Detail
{Boolean}
checked
Control the attribute "checked" of the HTML checkbox.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- false
{Boolean}
disabled
Control the attribute "disabled" of the HTML checkbox.
Defined in: options.js.
Defined in: options.js.
- Default Value:
- false
Method Detail
{String}
Value()
Returns the value of the checkbox element
- Returns:
- {String} value of the checkbox.
Attributes borrowed from other Elements
- Attributes borrowed from class Text:
- anchor, anchorX, anchorY, attractors, cssClass, cssDefaultStyle, cssStyle, digits, display, dragArea, fontSize, fontUnit, formatNumber, highlightCssClass, highlightCssDefaultStyle, highlightCssStyle, intl, isLabel, katexMacros, parse, rotate, snapSizeX, snapSizeY, toFraction, useASCIIMathML, useCaja, useKatex, useMathJax, visible
- Attributes borrowed from class JXG.GeometryElement:
- dash, dashScale, draft, dragToTopOfLayer, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, viewport, withLabel
Fields borrowed from other Elements
- Fields borrowed from class JXG.Text:
- size
- Fields borrowed from class JXG.GeometryElement:
- _org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc
- Fields borrowed from class JXG.CoordsElement:
- coords, groups, isConstrained, needsUpdateFromParent, onPolygon, position, slideObject, slideObjects
Methods borrowed from other Elements
- Methods borrowed from class JXG.Text:
- _createFctUpdateText, _setText, bounds, checkForSizeUpdate, convertGeonext2CSS, convertGeonextAndSketchometry2CSS, convertSketchometry2CSS, crudeSizeEstimate, escapeTicks, expandShortMath, generateTerm, getAnchorX, getAnchorY, getNumberOfConflicts, getSize, hasPoint, notifyParents, poorMansTeX, replaceSub, replaceSup, setAutoPosition, setCoords, setText, setTextJessieCode, unescapeTicks, update, updateRenderer, updateSize, updateText, utf8_decode, valueTagToJessieCode
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, updateVisibility, useLocale
- Methods borrowed from class JXG.CoordsElement:
- _anim, addAnchor, addConstraint, Coords, Dist, findClosestSnapValue, free, handleAttractors, handleSnapToPoints, makeGlider, moveAlong, moveTo, popSlideObject, setGliderPosition, setPositionByTransform, updateConstraint, updateCoords, updateGlider, updateGliderFromParent, updateTransform, visit, X, XEval, Y, YEval, Z, ZEval
Events borrowed from other Elements