Develop Reference

Get values from HTML only if the checked box is checked (HTML + Python script)

I have a web page with multiple checkboxes and the relative input values
with the following code:
<tr><td><input type=\"checkbox\" id=\"second_checkbox\" name=\"second_checkbox\" value=\"" + Sample_ID + "\"><label for=\""+ Sample_ID + "\">"+ Sample_ID +"</label><br></td><td><select name=\"option\" id=\"option\"><option value=\"\" selected=\"selected\"></option><option value=\"=\">=</option><option value=\"!=\">!=</option><option value=\">\">></option><option value=\">=\">>=</option><option value=\"<\"><</option><option value=\"<=\"><=</option><option value=\"ilike\">contains</option></select></td><td><input type=\"text\" name=\"valore\" placeholder=\"value\"></td></tr>"
and I get the different values by using this functions:
filtri = request.form.getlist('second_checkbox')
simbolo = request.form.getlist('option')
valori = request.form.getlist('valore')
but the array "valori" takes all the empty values on the page and I want to take only the ones that are checked on the first checkbox.
How can I do that?
Thanks

First, remove the duplicate id's and names in the html. An id in html should be unique. Using the right selection mechanism you don't need them either.
For the client side (so, within the browser) you can select all checked checkboxes using the selector [type=checkbox]:checked. Here's a minimal reproducable example.
document.addEventListener(`click`, evt => {
console.clear();
const allChecked = document.querySelectorAll(`[type='checkbox']:checked`);
// ^ only checked
if (allChecked.length) {
return allChecked
.forEach(cb => {
const theRow = cb.closest(`tr`);
console.log(`checked row (#${theRow.rowIndex + 1}) text input value: ${
theRow.querySelector(`input[type='text']`).value || `no value`}`);
});
}
return console.log(`none checked (yet)`);
});
<table>
<tr>
<td>
<input type="checkbox" value="123"> 123
</td>
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 1">
</td>
</tr>
<tr>
<td>
<input type="checkbox" value="456"> 456
</td>
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 2">
</td>
</tr>
<tr>
<td><input type="checkbox" value="789"> 789
<td>
selector here
</td>
<td>
<input type="text" placeholder="value" value="row 3">
</td>
</tr>
</table>

How do I get certain vaules of an array in js by checking the checkbox?

I'm new to javascript and kind of stuck with the problem.
I want to create some checkboxes and when I select and submit some of them, I want to get the associated output from an array. In my case, I can only send some data by hard coding in the "value" attribute of the "input" element. But, I want to send the data from the array "names".
Can anyone please help me out?
function submit() {
var names = ["zihan", "zihan", "zihan", "masud", "masud", "shakil"];
var arrayNAME = [];
var tblName = document.getElementById("tblName");
var check = tblName.getElementsByTagName("input");
for (var i = 0; i < check.length; i++) {
if (check[i].checked) {
arrayNAME.push(check[i].value);
}
}
if (arrayNAME.length > 0) {
alert(`Selected value: ${arrayNAME.join(",")}`);
}
}
<table id="tblName">
<tr>
<td>
<input type="checkbox" id="zahid" value="zahid">
<label for="zahid"> Zahid </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="masud" value="masud">
<label for="masud"> Masud </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="jihan" value="jihan jihan jihan">
<label for="jihan"> Jihan </label>
</td>
</tr>
</table>
<br>
<button onclick="submit()"> Submit </button>

You may select all the checkboxes and then depending on their index in the page and if a checkbox is checked append the desired value to the final array from "names" array.
function submit() {
// dummy values to facilate the recognition of the checked input(s)
const names = ['checkbox one', 'checkbox two', 'checkbox three'],
arrayNAME = [],
tblName = document.getElementById("tblName"),
check = tblName.querySelectorAll("input[type=checkbox]");
// push the "names" values to "arrayNAME" of the checked inputs
check.forEach((el, idx) => el.checked && arrayNAME.push(names[idx]));
// for a better UX on the site (SO), I'd use "console.log" instead of "alert"
arrayNAME.length && console.log(`Selected value: ${arrayNAME.join(",")}`);
}
<table id="tblName">
<tr>
<td>
<input type="checkbox" id="zahid" value="zahid">
<label for="zahid"> Zahid </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="masud" value="masud">
<label for="masud"> Masud </label>
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="jihan" value="jihan jihan jihan">
<label for="jihan"> Jihan </label>
</td>
</tr>
</table>
<br>
<button onclick="submit()"> Submit </button>

How use Regex from uncheck all files by file formats

i need uncheck many files from this HTML with JQuery
HTML:
<div class="well">
<h2>Select you files</h2>
<table id="list-files" class="table table-bordered table-striped table-condensed table-hover">
<tbody>
<tr>
<th width="10px"><input type="checkbox" id="select-all-files" checked="checked"></th>
<th>File</th>
<th>Size</th>
</tr>
<tr class="selectedFiles" style="display: table-row;">
<td><input type="checkbox" name="files[]" value="0" checked=""></td>
<td>
<div><span class="pull-left">The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT/</span><span style="padding-top:1px;padding: 0 2px;display:block;overflow:hidden"><input style="width:100%;color:#c8c8c8;background-color:transparent;padding:0px;margin:0px" type="text" name="rename[0]" value="Visit thist Web.com.txt"></span></div>
</td>
<td>34.0 iB</td>
</tr>
<tr class="selectedFiles" style="display: table-row;">
<td><input type="checkbox" name="files[]" value="1" checked=""></td>
<td>
<div><span class="pull-left">The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT/</span><span style="padding-top:1px;padding: 0 2px;display:block;overflow:hidden"><input style="width:100%;color:#c8c8c8;background-color:transparent;padding:0px;margin:0px" type="text" name="rename[1]" value="The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT.mkv"></span></div>
</td>
<td>8.8 GiB</td>
</tr>
<tr class="selectedFiles" style="display: table-row;">
<td><input type="checkbox" name="files[]" value="2" checked=""></td>
<td>
<div><span class="pull-left">The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT/</span><span style="padding-top:1px;padding: 0 2px;display:block;overflow:hidden"><input style="width:100%;color:#c8c8c8;background-color:transparent;padding:0px;margin:0px" type="text" name="rename[2]" value="The.Blind.Side.2009.1080p.BluRay.x264.DTS-FGT.nfo"></span></div>
</td>
<td>5.4 KiB</td>
</tr>
</tbody>
</table>
</div>
SCRIPT:
var inp=$("tr input");
var r="Visit thist Web.com.txt";
for (i = 0; i < inp.length; i++) {
if(inp[i].value == r){
inp[i-1].checked = false;
}
}
How to improve this code?
This script uncheck only var r="Visit thist Web.com.txt"; and i need uncheck all files with .txt! it's true this example only has one .txt, but that usually changes, even the order.
I would also like to unmark files with .nfo, .url, jpg, gif that's why I suppose it would be best to do it with regex
for tampermonkey on chrome
Thank

You can use the Jquery filter function with a regex. The regex:
/\.txt$/gi
The regex will match the literal string: '.txt' at the end.
How to use:
var inp=$("tr input").filter( function (index)
{
return /\.txt$/gi.test($(this).val());
}).closest('tr').find('td:first-child input').prop('checked', false);
This will set the checked property to false on matched elements.
To uncheck other file types, you can change the regex to:
/\.txt$|\.nfo$|\.url$|\.jpg$|\.gif$/gi
Edit: I have studied your html a bit closer and changed my code, hope it Works now.
Edit2:
Actually you can also use your original code extended to include regex:
var inp=$("tr input");
var regex = /\.txt$|\.nfo$|\.url$|\.jpg$|\.gif$/gi;
for (i = 0; i < inp.length; i++) {
if (regex.test(inp[i].value)) {
inp[i-1].checked = false;
}
}

Disable Or Enable Checkbox Array Using Javascript

I have Following codes:
<html>
<head>
</head>
<body>
<table>
<tr>
<td>
<input type="checkbox" name="ck[]" value="sakit">
</td>
<td>
<input type="checkbox" name="ck[]" value="izin">
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="ck[]" value="sakit">
</td>
<td>
<input type="checkbox" name="ck[]" value="izin">
</td>
</tr>
</table>
</body>
</html>
How can i disable checkbox in first tr element without make changes in second tr, otherwise i can disable checkbox in second tr element without make changes in first tr?

You can use document.querySelector to target elements using a css selector.
For targeting the first <tr>
document.querySelector('tr:first-child input').disabled = true;
or for targeting the second <tr>
document.querySelector('tr:last-child input').disabled = true;

You can simply disable a checkbox with: CheckboxObject.disabled = true;

In HTML you all you have to do is:
<input type="checkbox" name="ck[]" value="sakit" disabled>
in JS you would do this:
var fields = document.getElementsByTagName("input");
for (var i = 0; i < fields.length; i++) {
if (fields[i].type == "checkbox")
fields[i].disabled = true;
}
this would disable the first checkbox on page.. if you need something different, let me know.

Display the mathematical difference between the title of 2 checkbox elements

I have a form that uses checkboxes similar to the one below
<Form>
<table>
<tr>
<td align="left" width="15"><input name="switch" title="0" id="radio17" value="Free Shipping" checked="checked" type="radio" />
</td>
<td>Free Shipping</td>
</tr>
<tr>
<td align="left" width="15"><input name="switch" title="38" id="radio18" value="Standard Shipping" type="radio" />
</td>
<td>Standard Shipping
</td>
</tr>
</table>
and what i need is the difference in price, which is denoted by the title, to be displayed next to the name.So if Free Shipping is selected the output should look like "Free Shipping [+0]" and Standard shipping will look like "Standard Shipping [+38]"
I am just learning javascript, so that would be prefered, but anything will do if it works.

Do you mean something like this?
<form>
<label><input type="radio" name="switch" title="Free Shipping" id="freeshipping" value="0" checked="checked" type="radio" />Free Shipping</label>
<label><input type="radio" name="switch" title="Standard Shipping" id="standardshipping" value="38" />Standard Shipping</label>
<div>Selected shipping method: <span id="shippingtitle"> </span> [+<span id="shippingcost"> </span>]</div>
</form>
window.onload = function(){
var i;
for(i = 0; i < document.getElementsByName('switch').length; ++i){
document.getElementsByName('switch')[i].onclick = function(){
document.getElementById('shippingtitle').firstChild.data = this.title;
document.getElementById('shippingcost').firstChild.data = this.value;
}
}
};
label{
display:block;
float:left;
clear:left;
width:30%;
}
form{
max-width:500px;
}
It seems that you're just learning JavaScript. That's great, but don't use a helicopter if you're trying to steer a car (learn basic JavaScript and read a little bit about the DOM before you use jQuery).

I would access the radio elements by id and then update their parent element's sibling element's text to include the value of the "title" attribute of the radio button. For example:
function showPriceDifference(id) {
var el = document.getElementById(id)
, price = el.getAttribute('title');
el.parentElement.nextElementSibling.innerHTML += ' [+' + price + ']';
}
showPriceDifference('radio17');
showPriceDifference('radio18');