Develop Reference

How to remove a part of the content of a div with jQuery?

When I click on a checkbox, I append some content to a div (#item_list)
if(cb_new.prop('checked')) {
$("#item_list").append("<input type='hidden' name='post[]' value="+ this.value +">");
} else {
// ??
}
When I uncheck the box I want that exact same string to be removed from the div. Keeping all the others that have a different value (this.value).
So for example I could have:
<div id="item_list">
<input type="hidden" name="post[]" value="102">
<input type="hidden" name="post[]" value="93">
</div>
But if I uncheck
<input type="checkbox" id="d-102-2" name="d-102" value="102" data-id="d-102">
I want :
<div id="item_list">
<input type="hidden" name="post[]" value="93">
</div>
If I check it again, I want it back.
How can I do that?

A vanilla JS solution would look like:
Updated according to your expanded requirements.
document.querySelector(`#item_list input[value='${this.value}']`).remove();
This will query the DOM, find an input element, with a value attribute whose value is equal to this.value, and remove it from the DOM with the remove() method.
A more detailed implementation isn't easy to give without having more information.

You can use the data attribute to assign unique id to the checkbox, once it is checked, input element with same data-uid is added and once unchecked we remove the input element with same data-uid
$(document).ready(function() {
$("#cb_new").change(function() {
if ($(this).prop('checked')) {
$("#item_list").append($("<input data-uid='"+$(this).data('uid')+"' type='text' name='post[]' class='newItem' value='" + $(this).val() + "'>"));
} else {
$('.newItem[data-uid='+$(this).data('uid')+']').remove();
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="cb_new" data-uid="8080" value="tick Me" name="test"/><label for="test">Tick Me</label>
<div id="item_list" style="border:1px solid tomato">
</div>

Removing from array values of checkboxes in jQuery

I have a checkboxes like this:
while($userRow=$resultForUsers->fetch_assoc()){
$nameOfUser=$userRow['users_name'];
$userId=$userRow['user_facebook_id'];
$userFBPicture=$userRow['users_picture'];
echo "
<tr class='tr-data-users'>
<td class='text-center'>
<input type='checkbox' class='checkbox' onclick='if(this.checked){selo(this.value)}else{izbaci(this.value)}' value=$userId>
</td>
So, for each user in my database I'm having one checkbox with value of his id. I need id's of all checked users(i.e checkboxes) in one array. I did it this way:
<input type='checkbox' class='checkbox' onclick='if(this.checked){put(this.value)}else{remove(this.value)}' value=$userId>
var niz={};
var index=0;
function put(o){
niz[index++]=o;
console.log(niz);
}
So, console.log now displays id's of all checked checkboxes. What I want to do is if checkbox is unchecked then to remove that id(i.e chechbox value) from array. I tried it like this:
onclick='if(this.checked){put(this.value)}else{remove(this.value)}'
var niz={};
var index=0;
function put(o){
niz[index++]=o;
console.log(niz);
remove(o,niz);
}
function remove(o,niz){
if($.inArray(o,niz)){
console.log('radim');
var indexNiza= $.inArray(o,niz);
niz= $.grep(niz,function(a,o){
return (a!=o);
});
}
}
As you can see this else part should handle if checkbox is unchecked and remove that id from array, but it doesn't work. Would really appreciate help on this.

It seems that the code you have written is taking a very complex route for a simple job. You can see the following for a good example on how to obtain all of the values into their own arrays for the checked and unchecked states.
In the demonstration, I enumerate through the checked and unchecked checkboxes if the user changes the state of any checkbox, and store the checked values in an array named cbChecked and the unchecked values get stored in cbUnchecked
The key here is the selectors used:
Selector usage
Get all 'checked' objects
:checked
Get all 'unchecked' objects
:not(:checked)
Demonstration
$(document).ready(function() {
$("input[type='checkbox']").change(function() {
var cbChecked = new Array();
var cbUnchecked = new Array();
$("input[type='checkbox']:checked").each(function() {
cbChecked[cbChecked.length] = this.value;
});
$("input[type='checkbox']:not(:checked)").each(function() {
cbUnchecked[cbUnchecked.length] = this.value;
});
$("p#cbChecked").html( cbChecked.join() );
$("p#cbUnchecked").html( cbUnchecked.join() );
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2> The checkbox form</h2>
<form id="foo">
<p>A : <input type="checkbox" id="a" value="a"></p>
<p>B : <input type="checkbox" id="b" value="b"></p>
<p>C : <input type="checkbox" id="c" value="c"></p>
<p>D : <input type="checkbox" id="d" value="d"></p>
<p>E : <input type="checkbox" id="e" value="e"></p>
<p>F : <input type="checkbox" id="f" value="f"></p>
</form>
<h2>Checked Values</h2>
<p id="cbChecked"></p>
<h2>Unchecked Values</h2>
<p id="cbUnchecked"></p>

Disable all checkboxs when one checkbox is checked

im like two days fighting against this, and i wish some1 can help
im using a PHP that generats 4 checkboxes
<form method="post" class="car_booking_form" >
<div class="booking-item-price-calc">
<div class="row row-wrap">
<div class="col-md-<?php echo esc_attr($col) ?> singe_cars" data-car-id="<?php the_ID()?>">
<?php $list = get_post_meta(get_the_ID(),'cars_equipment_list',true); ?>
<?php
if(!empty($list)){
foreach($list as $k=>$v){
$v['cars_equipment_list_price'] = apply_filters('st_apply_tax_amount',$v['cars_equipment_list_price']);
$price_unit = isset($v['price_unit'])? $v['price_unit']: '';
$price_unit_html='';
switch($price_unit)
{
case "per_hour":
$price_unit_html=__('/hour',ST_TEXTDOMAIN);
break;
case "per_day":
$price_unit_html=__('',ST_TEXTDOMAIN);
break;
default:
$price_unit_html=__('',ST_TEXTDOMAIN);
break;
}
echo '<div class="checkbox">
<label>
<input class="i-check equipment" data-price-unit="'.$price_unit.'" data-title="'.$v['title'].'" data-price="'.$v['cars_equipment_list_price'].'" type="checkbox" />'.$v['title'].'
<span class="pull-right">'.TravelHelper::format_money($v['cars_equipment_list_price']).''.$price_unit_html.'</span>
</label>
</div>';
}
}
?>
if i hade 4 normal labels i could give theme Ids and use a JS script, now the Checkboxs gets generated automatically and i dont know how to manage it so when a Checkbox is checked the other 3 gets disabled
thanks and sorry for my bad EN

There is no problem with the use of radios or checkboxes. If you want to make a group of radios, then you need to add them the same NAME.
Since you can change the HTML generated by your script, then you can add a name to your radio/checkbox.
If you want to make it with checkboxes, then change the part of your script that generates the html to this:
echo '<div class="checkbox">
<label>
<input class="i-check equipment equipment-disabling-checkbox" data-price-unit="'.$price_unit.'" data-title="'.$v['title'].'" data-price="'.$v['cars_equipment_list_price'].'" type="checkbox" />'.$v['title'].'
<span class="pull-right">'.TravelHelper::format_money($v['cars_equipment_list_price']).''.$price_unit_html.'</span>
</label>
</div>';
Here we add a class equipment-disabling-checkbox to know what/which checkbox disable.
Then, supposing that you want an INDEPENDENT checkbox to disable all of them, add it out of your foreach loop.
// Disable all other checkboxes
echo '<div class="checkbox">
<label>
<input class="i-check equipment" type="checkbox" id="disable-equipment-checkboxes" /> Disable all
</label>
</div>';
Here we define a "disable all" checkbox.
and add this to your JQuery handlers:
$(document).on("change", "#disable-equipment-checkboxes", function() {
if ( $(this).prop('checked') ) {
$(".equipment-disabling-checkbox").prop('disabled', true);
} else {
$(".equipment-disabling-checkbox").prop('disabled', false);
}
});
And here we handle the change event of the "disable all" checkbox and enable/disable the other checkboxes.
If you want another solution, explain yourself better please.
P.D.: I made a fiddle for you: https://jsfiddle.net/s6fe9/559/
EDIT: To cover the needs of Omar properly:
Change the HTML echo to this:
echo '<div class="checkbox">
<label>
<input class="i-check equipment equipment-unique-checkbox" data-price-unit="'.$price_unit.'" data-title="'.$v['title'].'" data-price="'.$v['cars_equipment_list_price'].'" type="checkbox" />'.$v['title'].'
<span class="pull-right">'.TravelHelper::format_money($v['cars_equipment_list_price']).''.$price_unit_html.'</span>
</label>
</div>';
This will add a class name to all the unique checkboxes.
Then, add this piece of code to your JQuery handlers:
$(document).on("change", ".equipment-unique-checkbox", function() {
if ( $(this).prop('checked') ) {
$(".equipment-unique-checkbox").prop('checked', false);
$(this).prop('checked', true);
} else {
$(".equipment-unique-checkbox").prop('checked', false);
$(this).prop('checked', false);
}
});
And here we uncheck all of them, and check the selected one.
Notice that the repeated line that unchecks all of them is needed in both parts of the if condition to work properly.
Here you have another fiddle :)
https://jsfiddle.net/s6fe9/561/
P.D.: I realized that the code for the HTML edit were broken somehow. So I updated it.

Try this if it works:
$('input[type="checkbox"]').is('checked',function(e){
e.preventDefault();
$( "input[type='checkbox']").attr( "disabled", true);
$(this).removeAttr('disabled');
});

Do you have no access to that foreach loop at all? If you do, you can try something along these lines using radio buttons:
echo '<div class="checkbox">
<label>
<input type="radio" value="' . $price_unit . '" name="price" />' . $v['title'] . '
<span class="pull-right"></span>
</label>
</div>';
Keeping in mind, the above is just a stripped down version of yours so you may need to add in all your data variables.

Bootstrap set radio button checked with jquery

I have radio buttons in my html code.
I want to change their state based on my input values via jquery
Here is My Html
<div class="col-md-2 col-xs-offset-1">
<div class="radio">
<label>
<input type="radio" name="rdo_pkdrop" value="0" id="rdo_pick">
Pick-up Time
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="rdo_pkdrop" id="rdo_drop" value="1">
Drop Time
</label>
</div>
</div>
An jQuery is
if(qs_trip_type == 0){
$('#rdo_pick').prop('checked',true);
}else{
$('#rdo_pick').prop('checked',true);
}
But This has no effect
I also tried with
$('#rdo_pick').prop('checked','checked'); and
$('#rdo_pick').attr('checked','true');
$('#rdo_pick').addClass('checked');

This is only way I could find. Although somewhat inelegant, it does work.
if(qs_trip_type == 0){
$('#rdo_pick').click();
}else{
$('#rdo_drop').click();
}

The issue with bootstrap is that you set a checked radio button by adding the active class to the corresponding label of the input. It looks like this:
<label class="btn btn-default active"> <!-- Note the class 'active' here -->
<input type="radio" name="myRadio" value="value1" checked="checked"/>Value 1
</label>
<!-- ... -->
To check a radio button using jQuery you could first select the input field with a jQuery Selector and then add the class to the parent:
var $myRadioInput = $(...);
$myRadioInput.parent('.btn').addClass('active');
Don't forget to remove the class active on the formerly selected label with jQuery removeClass('active') to first unselect them.
I also like it to set the checked property on the input itself to have the proper state on it:
$myRadioInput.prop('checked', true);
Note that the checked="checked" attribute is only the inital state for the input to be the checked input when loading the page. It does NOT change with the jQuery .prop() method, as it is an attribute and is different to the actual checked property. This is well described in jQuery Docs.

I have tried，this code is ok for bootstrap radio.
if(qs_trip_type == 0){
$('#rdo_pick').prop('checked',true).click();
}else{ //not ekse
$('#rdo_pick').prop('checked',true).click();
}

there is a typo in your code replace ekse with else
if(qs_trip_type == 0){
$('#rdo_pick').prop('checked',true);
}else{
$('#rdo_pick').prop('checked',true);
}

if(qs_trip_type == 0){
$('#rdo_pick').prop('checked',true);
}else{ //not ekse
$('#rdo_pick').prop('checked',true);
}
Here's the jsfidlle http://jsfiddle.net/urLh9qnh/

Try this
if(qs_trip_type == 0){
$('#rdo_pick').prop('checked',true);
}else{
$('#rdo_drop').prop('checked',true);
}

Try This:
after setting the value of the radio, please add this code
$("input[type='checkbox'], input[type='radio']").iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal'
});

Here is a one line solution:
$('#rdo_pick').iCheck('check');

pass variables from checkboxes to an onclick function

I've created a table and each row as a checkbox.
What i'm trying to do is when someone checks one or more rows a garbage can icon appears.
Clicking on the garbage can deletes the chosen rows.
This is the code i wrote so far:
The div where the garbage can appears:
<div class="hidden" id="adminPanelShow">
<img src="../images/garbage.jpg" class="adminPanelIcons"/><br>
<img class="hrLine" src="images/line.png"/>
</div>
The Table:
<table>
<tr><td><input type = "checkbox" name="idPriv[]" id="idPriv" onclick="evaluateIT(this)" data-related-item="adminPanelShow" value ="<?php echo $value["id"]?>" /></td>
<td><input type="text" name="userName[]" id="userName" class="adminPanel" value="<?php echo $value["userName"]?>"/></td>
<td><input name="firstName[]" type="text" id="firstName" class="adminPanel" value="<?php echo $value["firstName"]?>"/></td>
<td><input name="lastName[]" type="text" id="lastName" class="adminPanel" value="<?php echo $value["lastName"]?>"/></td>
</tr>
</table>
The javascript code:
function evaluateIT(obj){
var item = $(obj);
var relatedItem = $("#" + item.attr("data-related-item"));
var length = $("input:checked").length;
if(item.is(":checked") )
relatedItem.fadeIn();
else if(item.not(":checked") && length == 0)
relatedItem.fadeOut();
}
Now, everything is working good, But how can i pass the values (id numbers..) from the selected checkboxes into an onclick function of the garbage can?
That means, I want that each time i click the garbage can i can do some operations with the values of the chosen checkboxes.

I think when you said "everything is working good", you meant to say the code till garbage-can display is working, but not the implementation of garbage-can functionality. I assume this from the javascript function that you have. Please be more clear which will enable people to help you.
Now,
Look at this example, and you can implement on your case. I tried this, and it works
HTML:
<div id="garbagecan" style="border: 1px solid red">garbagecan</div>
<ul id="books">
<li><input id="book1" value="book1" type="checkbox"><span>Book1</span>
</li>
<li><input id="book2" value="book2" type="checkbox"><span>Book2</span>
</li>
<li><input id="book3" value="book3" type="checkbox"><span>Book3</span>
</li>
<li><input id="book4" value="book4" type="checkbox"><span>Book4</span>
</li>
</ul>
Javascript code [using jquery]
$(document).ready(function($) {
$("#garbagecan").hide();
$("#garbagecan").click(function() {
var selectedIds = $("#books :checkbox:checked").map(function() {
return $(this).val();
}).get();
alert(selectedIds);
});
$("#books :checkbox").click(function() {
if ($("#books :checkbox:checked").length > 0) {
$("#garbagecan").show();
} else {
$("#garbagecan").hide();
}
});
});
What this does: The garbage can div will be hidden until you select atleast one checkbox. When you have selected a minimum of one checkbox, and when you click the garbage can, i am alerting the array of selected values. When you call the .get() method, the resultant jquery object is converted to an array.
Hope this helps.