I want to add a button for a checkbox group, so that when I click the button all the checkboxes will be selected.
How can I do this by using SplunkJS?
Hi
Try this
<form script="checkbox.js">
<label>checkbox</label>
<fieldset submitButton="false">
<input type="checkbox" token="sports" id="rk">
<label>Sports</label>
<choice value="football">Football</choice>
<choice value="baseball">Baseball</choice>
<choice value="cricket">Cricket</choice>
<choice value="boxing">Boxing</choice>
</input>
</fieldset>
<row>
<html>
<div>
<button id="all">Select All</button>
</div>
</html>
</row>
</form>
js:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
$(document).ready(function(){
$("#all").click(function(){
var checkbox= mvc.Components.get("rk");
var temp=[];
var dictionary = checkbox.settings.get("choices");
Object.keys(dictionary).forEach(function(key) {
var checkboxvalues = Object.values(dictionary[key].value).join("");
temp.push(checkboxvalues);
});
checkbox.val(temp);
});
});
});
Hi
Try this
<form script="checkbox.js">
<label>checkbox</label>
<fieldset submitButton="false">
<input type="checkbox" token="sports" id="rk">
<label>Sports</label>
<choice value="football">Football</choice>
<choice value="baseball">Baseball</choice>
<choice value="cricket">Cricket</choice>
<choice value="boxing">Boxing</choice>
</input>
</fieldset>
<row>
<html>
<div>
<button id="all">Select All</button>
</div>
</html>
</row>
</form>
js:
require([
'underscore',
'jquery',
'splunkjs/mvc',
'splunkjs/mvc/simplexml/ready!'
], function(_, $, mvc) {
$(document).ready(function(){
$("#all").click(function(){
var checkbox= mvc.Components.get("rk");
var temp=[];
var dictionary = checkbox.settings.get("choices");
Object.keys(dictionary).forEach(function(key) {
var checkboxvalues = Object.values(dictionary[key].value).join("");
temp.push(checkboxvalues);
});
checkbox.val(temp);
});
});
});
I Have similar problem but when we have multiple checkboxes in dashboard with different id's for each checkbox, How can we select/Deselect All checkboxes at time. below my sample xml code
<input type="checkbox" id="rk1" token="field1">
<label>Select/Unselect ALL</label>
<choice value="1">2</choice>
<delimiter> </delimiter>
</input>
<input type="checkbox" id="rk2" token="field2">
<label>Check3</label>
<choice value="chicago">chicago1</choice>
</input>
<input type="checkbox" id="rk3" token="field3">
<label>check3</label>
<choice value="Detriot">detroit1</choice>
</input>
Thank you very much for your answer. I tried. It's okey.
but now,I hava a new question.
Q:when the checkboxgroup's options was creted by SPL, how can i get all options.
The following command has no effect.
[var dictionary = checkbox.settings.get("choices");]
i implemented my function with the following JS:
var clsWfResults = search1.data("preview");
clsWfResults.on("data", function() {
var i = 0;
while (clsWfResults.data().rows[i][0] != "") {
array[i] = clsWfResults.data().rows[i][0];
i++;
}
});
$("#all_check_button").on("click",function(){
splunkjs.mvc.Components.get("input1").val(array);
});
$("#all_clear_button").on("click",function(){
splunkjs.mvc.Components.get("input1").val(null);
});