I want change name attribute in <input> element, I have in the here several name string[0][], now i want after click on link add change 0 in they and replace 1 instead all 0. How is it by Jquery?
DEMO: http://jsfiddle.net/2hXk5/
I try as but don't work for me:
<div class="ch">
<p>
<input type="checkbox" name="cDA[0][]">
<input type="checkbox" name="cDA[0][]">
<input type="checkbox" name="cDA[0][]">
<input type="checkbox" name="cDA[0][]">
</p>
<p>
<input type="checkbox" name="cFE[0][]">
<input type="checkbox" name="cFE[0][]">
<input type="checkbox" name="cFE[0][]">
<input type="checkbox" name="cFE[0][]">
</p>
<p>
<input type="checkbox" name="cYG[0][]">
<input type="checkbox" name="cYG[0][]">
<input type="checkbox" name="cYG[0][]">
<input type="checkbox" name="cYG[0][]">
</p>
Add
</div>
$('a.adding').live('click change', function (e) {
e.preventDefault();
$clone = $(this).closest('.ch').clone().insertAfter('.ch');
$clone.find('input[type="checkbox"]:contains("0")').prop('1');
})
If I understand you correctly, you want to use .attr() with a callback function:
$('input[type="checkbox"]').attr('name',function(i,str) {
return str.replace('0','1');
});
UPDATE: Here's a complete version which will do everything you seem to actually want. It uses str.match(/\d+/) to extract the FIRST number-string in the name attribute, converts it to an integer, then replaces it with the next integer using str.replace. Note the insertAfter part was updated so it only inserts after the LAST div.ch:
$(document).on('click change', 'a.adding', function(e) {
e.preventDefault();
$div = $(this).closest('.ch');
$clone = $div.clone().insertAfter($div);
$clone.find('input[type="checkbox"]').attr('name', function(i, str) {
var int = parseInt(str.match(/\d+/)[0],10);
return str.replace(int, (int+1));
});
});
http://jsfiddle.net/mblase75/3SGNw/
Related
for single id i did like this but how to get all id on click of button when check the universal checkbox for all the columns
My Html File:-
<td><input type="checkbox" name="option" value="{{item.customerid}} " required ></td>
<input type="button" value="Transfer" (click)="getclickedevent($event)">
My Javascript file:-
getclickedevent(event) {
let id = $("input:checkbox[name=option]:checked").val();
console.log("The Required checkbox checked is "+ id)
}
make all the id's children of one master id
then use this
var div = // getElementById, etc
var children = div.childNodes;
var elements = [];
for (var i=0; i<div.childNodes.length; i++) {
var child = div.childNodes[i];
if (child.nodeType == 1) {
elements.push(child)
}
}
I hope you don't mind but I took the approach of refactoring your code.
Here is the HTML:
<td>
<input type="checkbox" name="option" value="{{item.customerid}}" required >
</td>
<input type="button" value="Transfer">
<div id='options'>
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
<br><input name='options' type="checkbox">
</div>
And here is the jQuery. I used jQuery because you missed native javascript and jQuery in your code:
$('input[type="button"][value="Transfer"]').click( function() {
let id = $("input:checkbox[name=option]").is(':checked');
$('input[name="options"]').each(function() {
this.checked = id;
});
});
You can see it all working here.
You can get all checked checkboxes values inside button click event handler using jquery .map() method like:
var ids = $("input:checkbox[name=option]:checked").map(function(){
return $(this).val();
}).get();
console.log(ids) //==> ['xxx', 'xxx', 'xxx', ...]
This will give a basic array containing all checked checkboxes values.
DEMO:
$("#checkAll").click(function() {
$("input:checkbox[name=option]").prop('checked', this.checked);
var ids = $("input:checkbox[name=option]:checked").map(function() {
return $(this).val();
}).get();
console.log(ids)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll">Check All
<hr />
<input type="checkbox" name="option" value="1">Item 1
<input type="checkbox" name="option" value="2">Item 2
<input type="checkbox" name="option" value="3">Item3
This should work for you. ↓↓
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<input type="checkbox" onclick="$('input[name*=\'customer_store\']').prop('checked', this.checked);"/> Select / Deselect<br>
<input type="checkbox" name="customer_store[]" value="xyz"/>xyz<br>
<input type="checkbox" name="customer_store[]" value="abc"/>abc<br>
Add ID to your button inputs and call on them as selectors for .click().
Add a function to get the click on the select all button and set all inputs to checked used an added class of option for to select the input elements that are check boxes.
Define an empty array to hold your values. Run your checked values through .each() loop and assign them to the array.
Those values will now live in the options array.
$(document).ready(function() {
$('#selectall').click(function(){
$('.option').prop("checked", true);
});
$('#transfer').click(function() {
var options = [];
$.each($("input[type='checkbox']:checked"), function() {
options .push($(this).val());
});
console.log(options);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input class="option" type="checkbox" name="option" value="{{item.customerid}}">
<input type="button" id="transfer" value="Transfer">
<input type="button" id="selectall" value="Select All">
I have a checkbox inside a P with class vertical options. I have written script to implement checkbox functionality even on clicking the P. The code is:
$(".vertical-options,.horizontal-options").click(function(event){
var input = $(this).find('input').first();
console.log(input);
if((event.target.type !== 'checkbox') && (input.attr('type') === 'checkbox')) {
if(input.is(':checked')){
input.prop('checked', false);
} else {
input.prop('checked', true);
}
}
});
but with this logic clicking on the checkbox label does not work. What am I doing wrong?
You need to use label tag for this purpose. Write id of target checkbox in for attribute of label tag.
<label for="id1">Checkbox-1</label>
<input type="checkbox" id="id1" />
<label for="id2">Checkbox-2</label>
<input type="checkbox" id="id2" />
<label for="id3">Checkbox-3</label>
<input type="checkbox" id="id3" />
If you want to do this work using jquery for other tag, see example
$("p").on("click", function(e){
var checkbox = $(this).find(':checkbox');
if ($(this).is(e.target))
checkbox.prop('checked', !checkbox.is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
Checkbox-1
<input type="checkbox" />
</p>
<p>
Checkbox-2
<input type="checkbox" />
</p>
<p>
Checkbox-3
<input type="checkbox" />
</p>
I have a div with 3 checkboxes inside div. I want to get all of them to string with jQuery.
Im using this theme http://almsaeedstudio.com/preview/
the checkbox in forms --> general elements.
its changes the HTML of checkbook for the design,
div:
<div id="some_id">
<input type="checkbox" value="1">
<input type="checkbox" value="2">
<input type="checkbox" value="3">
</div>
Jquery:
$("#some_div input[type='checkbox']").on('ifChecked', function(event){
arr='';
$('div[aria-checked="true"]').find("input").each(function(){
arr=arr+","+$(this).val();
});
console.log(arr);
});
The script works, but I have 2 problems:
It doesn't get the value of check-box that just been checked. For example:
if I check 1, arr will be empty.
if I check 1 and 2, arr will be ",1".
if I check 1 2 3, arr will be ",1,2".
How could I run this script when "unchecked"?
I tried:
$("#some_div input[type='checkbox']").on('click', function(event){
It doesn't work on bootstarp checkboxes. This is only a issue in bootstrap, in regular html there is no problem to get values with "click".
thanks.
First: Change - -> =
<input type="checkbox" value="1">
Second: Change name inside the input field
<input type="checkbox" value="1" name="checkgroup">
<input type="checkbox" value="2" name="checkgroup">
<input type="checkbox" value-"3" name="checkgroup">
Third: you can give it some ID for easy access:
<input type="checkbox" id="checkbox1" value="1" name="checkgroup">
Forth: Use jquery to do with it as you will:
$("#checkbox1").click('click', function(){.. /*do something*/ .. });
when dealing with checkboxes, it might be better to use the onChange. Here is a demo
try something like that:
<div id="some_id">
<input type="checkbox" value="1" name="checkgroup" />
<input type="checkbox" value="2" name="checkgroup" />
<input type="checkbox" value="3" name="checkgroup" />
</div>
JS:
$(document).ready(function () {
$('input[type="checkbox"]', '#some_id').on('change', function () {
var arr = '';
$('input[type="checkbox"]:checked', '#some_id').each(function (i, ele) {
if (arr.length > 0) {
arr += ', ';
}
arr += $(ele).val();
});
console.log(arr);
});
});
Am trying to get the value of the hidden input fields on every click of a radio button. I have just posted a single div. I have a multiple div with same structure. I have successfully obtained the value of radio button but I want to get the value of hidden input now.
<div class="QA">
<h1> First Question</h1>
<input type="radio" id="check" name="q" value="A">Options 1</input>
<input type="radio" id="check" name="q" value="B">Options 2</input>
<input type="radio" id="check" name="q" value="C">Options 3</input>
<input type="radio" id="check" name="q" value="D">Options 4</input>
<input type="hidden" id="result" value="B" />
<br/>
<div id="result"></div>
</div>
<script>
$(document).ready(function() {
$("input:radio").change(function() {
checkResult(this);
});
});
function checkResult(el)
{
$this=$(el).parent("div.QA");
$this.slideUp();
}
</script>
Maybe you could try removing the hidden input entirely and indicate the correct answer using a data-* attribute. Something like:
<div class="QA" data-answer="B">
Then in your checkResult function you could retrieve this value using
function checkResult(el)
{
$this=$(el).parent("div.QA");
var answer = $this.data("answer");
$this.slideUp();
}
function checkResult(el)
{
$this = $(el).parents("div.QA");
$this.slideUp();
var x = $this.find('#result').val(); //find value of hidden field in parent div
}
Change your markup
multiple id's should not be used. Use class instead.
<input type="radio" id="check" name="q" value="A">Options 1</input>
to
<input type="radio" class="check" name="q" value="A">Options 1</input>
var $hidden=$(el).siblings("input[type='hidden']");
BTW you have lot of elements with same ID, not good
You can get the value of the hidden element by it's id.
var hiddenValue = $("#result").val();
You can use this in hidden function
function checkResult(el)
{
var hiddenValue = $("#result").val();
alert(hiddenValue);
}
My problem is that when the checkbox below is clicked - the check function is called to check/uncheck all the checkboxes. But they have to change relatively to the invoking checkbox (the one with the "onchange" event).
The checkbox HTML declaration:
<input type="checkbox" onchange="$('input[type=checkbox][rel=users]').check();">
Sample JavaScript Code:
$.fn.check = function() {
$(this).each(function(){
$(this).attr('checked', checked);
});
}
And my question is: How can I get the DOM object corresponding to the "check all" checkbox?
Edit: Pass the this object of the checkAll to the function.
DEMO
<input type="checkbox"
onchange="$('input[type=checkbox][rel=users]').check(this);" />
Note the this is passed as .check(this)
And in the JS:
$(document).ready(function() {
$.fn.check = function(orgEl) {
$(this).each(function() {
$(this).attr('checked', orgEl.checked);
});
}
});
Old Post -
Bind the checkAll checkbox to an handler and call the fxn from inside.. See below,
HTML
<input type="checkbox" id="checkAll" >
JS
$(document).ready (function () {
$('#checkAll').click (function () {
//this inside is checkAll checkbox object.
$('input[type=checkbox][rel=users]').check();
});
});
Since you're binding this to the "checkall" checkbox, you have access to itself inline. So you can pass it to the jQuery .check() function you made and use it there. Look at this:
(please excuse my changes to your selecting, you can obviously use what you had before...but I would suggest using :checkbox instead of input[type=checkbox])
<html>
<head>
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript">
$.fn.check = function (obj) {
$(this).each(function (){
this.checked = obj.checked;
});
}
</script>
</head>
<body>
<input type="checkbox" id="checkall" onclick="$('.check-item').check(this);" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<input type="checkbox" class="check-item" /><br />
<body>
View on JSFIDDLE.
I'm a fan of using HTML5 data attributes for stuff like this. With the following DOM structure, you can define your target checkboxes with a data-target attribute on the triggering checkbox. The target should be a valid jQuery selector string.
HTML:
<input type="checkbox" id="checkUsers" class="checkAll" data-target="input[type=checkbox][rel=users]">
<label for="checkUsers">Users:</label>
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<input type="checkbox" rel="users">
<br><br>
<input type="checkbox" id="checkPlaces" class="checkAll" data-target="input[type=checkbox][rel=places]">
<label for="checkPlaces">Places:</label>
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
<input type="checkbox" rel="places">
Then you setup the plugin to use the target you defined to trigger the checks/unchecks based on the triggering checkbox's checked attribute.
Plugin:
(function( $ ){
$.fn.check = function() {
// "this" is a jQuery object of the checkbox that was clicked.
var target = this.data("target");
$(target).attr("checked", this[0].checked);
return this; //maintain chainability
};
})( jQuery );
The real benefit of this method is that it allows you to only have to manage one event handler declaration by attaching the event to a class instead of an id.
Event Handler Declaration:
$(function(){
$(".checkAll").click(function(){
$(this).check();
});
});