I wrote a function in javascript. It works perfectly to show and hide list items on click action. I have other 5 lists items that I want to use this function for them also. However, When I tried to generalize the function by passing parameters as IDs it did not work.
the following part of the html:
function toggle_att_menu() {
var att_list = document.getElementById("att-list");
var plus = document.getElementById("plus");
var minus = document.getElementById("minus");
att_list.style.display=
((att_list.style.display!='block')?'block':'none');
plus.style.display=
((plus.style.display!='none')?'none':'inline');
minus.style.display=
((minus.style.display!='inline')?'inline':'none');
}
// what I want to do is passing parameter as following:
function toggle_att_menu(x,y,z) {
var att_list = document.getElementById(x);
var plus = document.getElementById(y);
var minus = document.getElementById(z);
att_list.style.display=
((att_list.style.display!='block')?'block':'none');
plus.style.display=
((plus.style.display!='none')?'none':'inline');
minus.style.display=
((minus.style.display!='inline')?'inline':'none');
}
//and use the function five times with different IDs each time as following:
toggle_att_menu('att-list-1','plus-1','minus-1')
toggle_att_menu('att-list-2','plus-2','minus-2')
toggle_att_menu('att-list-3','plus-3','minus-3')
toggle_att_menu('att-list-4','plus-4','minus-4')
toggle_att_menu('att-list-5','plus-5','minus-5')
<div class="title linklike">
<span id="plus-1" class="plus" >▸</span><span id="minus-1" class="minus">▾</span> <a id="linklike" onclick="toggle_att_menu()" href="#"> condition </a>
</div>
<ul id= "att-list-1" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1" name="condition" class="multi_checkbox" value="1" type="checkbox"
/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2" name="condition" class="multi_checkbox" value="2" type="checkbox"
/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_3" name="condition" class="multi_checkbox" value="3" type="checkbox"
/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_4" name="condition" class="multi_checkbox" value="4" type="checkbox"
/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_5" name="condition" class="multi_checkbox" value="5" type="checkbox"
/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_6" name="condition" class="multi_checkbox" value="6" type="checkbox"
/>
damegaed
</label>
</li>
</ul>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<div class="title linklike">
<span id="plus-2" class="plus" >▸</span><span id="minus-2" class="minus">▾</span> <a id="link" onclick="toggle_att_menu()" href="#">condition</a>
</div>
<ul id= "att-list-2" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1" name="condition" class="multi_checkbox" value="1" type="checkbox"
/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2" name="condition" class="multi_checkbox" value="2" type="checkbox"
/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_3" name="condition" class="multi_checkbox" value="3" type="checkbox"
/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_4" name="condition" class="multi_checkbox" value="4" type="checkbox"
/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_5" name="condition" class="multi_checkbox" value="5" type="checkbox"
/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_6" name="condition" class="multi_checkbox" value="6" type="checkbox"
/>
damaged
</label>
</li>
</ul>
</div>
any idea or solution will be highly appreciated.I am not so familiar with jQuery. so please I need help using only pure java script.
Try it like this:
https://jsfiddle.net/bertdireins/dtmdod15/6/
function toggle_att_menu(elem) {
var container = elem.parentElement.parentElement;
var att_list = container.querySelector(".att-list");
var plus = container.querySelector(".plus");
var minus = container.querySelector(".minus");
att_list.style.display = ((att_list.style.display!='block')?'block':'none');
plus.style.display =((plus.style.display!='none')?'none':'inline');
minus.style.display = ((minus.style.display!='inline')?'inline':'none');
}
You first have to get the parent parent's container of your anker and then you can query the underlying elements.
Your ankers should then look like this:
<div class="title linklike">
<span id="plus" class="plus">▸</span>
<span id="minus" class="minus">▾</span>
<a id="linklike" onclick="toggle_att_menu(this)" href="#"> condition </a>
</div>
<ul id="att-list" class="att-list"> ... </ul>
Please be aware the fiddle is missing the initial CSS, so it looks little weird.
Query would make life much easier here.
The reason for this is your function calls, and your element IDs. You have no elements with id "att-list-1", "att-list-2" etc. You have two elements with the same id: "att-list". Two elements should never have the same id. Switch the ids to "att-list-1", "att-list-2" and so forth, and it probably should work. The same goes for "plus-1" ... and "minus-1" ..., you have no elements with those IDs in HTML, you use the same IDs "minus" and "plus" for several elements.
You are not using unique IDs for your elements - it's better to use classes for repeated elements. Anyway, you probably want something like that:
/*
function toggle_att_menu(x,y,z) {
var att_list = document.getElementById(x);
var plus = document.getElementById(y);
var minus = document.getElementById(z);
att_list.style.display = ((att_list.style.display!='block')?'block':'none');
plus.style.display = ((plus.style.display!='none')?'none':'inline');
minus.style.display = ((minus.style.display!='inline')?'inline':'none');
}
*/
function toggle_att_menu(element) {
var parent = element.parentElement.parentElement;
var att_list = parent.querySelector(".att-list");
var plus = parent.querySelector(".plus");
var minus = parent.querySelector(".minus");
att_list.style.display = ((att_list.style.display!='block')?'block':'none');
plus.style.display = ((plus.style.display!='none')?'none':'inline');
minus.style.display = ((minus.style.display!='inline')?'inline':'none');
}
<div class="search-attribute hide-list" data-attr="condition">
<div class="title linklike">
<span id="plus-1" class="plus">▸</span><span id="minus-1" class="minus">▾</span><a id="link-1" onclick="toggle_att_menu(this)" href="#"> condition </a>
</div>
<ul id="att-list-1" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_1_1" name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_2" name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_3" name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_4" name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_5" name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_1_6" name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damegaed
</label>
</li>
</ul>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<div class="title linklike">
<span id="plus-2" class="plus" >▸</span><span id="minus-2" class="minus">▾</span> <a id="link-2" onclick="toggle_att_menu(this)" href="#">condition</a>
</div>
<ul id="att-list-2" class="att-list">
<li class="checkbox ">
<label>
<input id="condition_2_1" name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_2" name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_3" name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_4" name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_5" name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox ">
<label>
<input id="condition_2_6" name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damaged
</label>
</li>
</ul>
</div>
As a general piece of advice, try:
not using the same id multiple times, because that's not how the id is supposed to work. Ids ought to be unique, otherwise, you're going to have problems with CSS and JavaScript in particular.
getting your elements by class, or some other non-unique selector, instead of id, using a function that can do that, such as getElementsByClassName orquerySelectorAll so that you can use your function just once.
using window.getComputedStyle(el).getPropertyValue as a fallback, when getting the current display to check against, in case the style is not defined yet (if you don't the first click will do nothing).
Now, regarding your problem, since you can't use jQuery, getting the elements will get kind of ugly and will depend vastly on how you position them relatively to each other. Since, you are using inline JavaScript to call your function, be sure to pass this as an argument to be able to use the link to get the required elements.
Snippet:
/* ----- JavaScript ----- */
function toggle_att_menu(a) {
var
/* Cache all desired elements. */
elements = {
att_list: a.parentElement.nextElementSibling.children[0],
plus: a.previousElementSibling.previousElementSibling,
minus: a.previousElementSibling
},
/* Store the wanted displays for each element type. */
displays = {
att_list: {from: "block", to: "none"},
plus: {from: "inline", to: "none"},
minus: {from: "none", to: "inline"}
};
/* Iterate over every property of the elements object. */
for (var type in elements) {
var
/* Cache the current element. */
element = elements[type],
/* Get the current display of the element. */
d = element.style.display ||
getComputedStyle(element, null).getPropertyValue("display");
/* Set the element's display to the appropriate one. */
element.style.display = (d != displays[type].from)
? displays[type].from
: displays[type].to;
}
}
/* ----- CSS ----- */
.plus { display: inline }
.minus { display: none }
<!----- HTML ----->
<div class="title linklike">
<span class="plus">▸</span>
<span class="minus">▾</span>
<a class="linklike" onclick="toggle_att_menu(this)" href="#">condition</a>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<ul class="att-list">
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damaged
</label>
</li>
</ul>
</div>
<div class="title linklike">
<span class="plus">▸</span>
<span class="minus">▾</span>
<a class="linklike" onclick="toggle_att_menu(this)" href="#">condition</a>
</div>
<div class="search-attribute hide-list" data-attr="condition">
<ul class="att-list">
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="1" type="checkbox"/>
new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="2" type="checkbox"/>
like new
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="3" type="checkbox"/>
excellent
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="4" type="checkbox"/>
good
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="5" type="checkbox"/>
fair
</label>
</li>
<li class="checkbox">
<label>
<input name="condition" class="multi_checkbox" value="6" type="checkbox"/>
damaged
</label>
</li>
</ul>
</div>
Related
My code is like this:
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>England</strong></li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Chelsea
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Mu
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Arsenal
</label>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>Spain</strong></li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Madrid
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Barcelona
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Atletico
</label>
</div>
</li>
</ul>
</div>
jsfiddle: https://jsfiddle.net/oscar11/m7by6zcw/
In each checkbox group, the user can only select a maximum of 1. If the user selects more than 1, I want to display alert messages.
For example in the England checkbox group, if the user chooses Chelsea, then chooses Arsenal again, it must display an alert message.
How can I do it?
I tried it. But I'm still confused
Try this
$('input[type="checkbox"]').change(function(){
var group = $("ul.list-unstyled");
for(var i=0;i<group.length;i++){
if($("input:checked",group[i] ).length>1){
alert("Not allowed to select more than one");
this.checked = false;
return;
}
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>England</strong></li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Chelsea
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Mu
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Arsenal
</label>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>Spain</strong></li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Madrid
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Barcelona
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Atletico
</label>
</div>
</li>
</ul>
</div>
I think a better option is to style radio buttons to look like checkboxes:
Very nice example I googled: http://cssdeck.com/labs/ldmtsmfk
So you don't need to struggle with JS logic which change the default behavior of radio buttons.
Without jQuery.
var checkboxes = document.querySelectorAll('[type="checkbox"]');
for (var ix = 0, length = checkboxes.length; ix < length; ix++) {
checkboxes[ix].addEventListener('change', function() {
if (document.querySelectorAll(':checked').length > 1) {
alert('no');
this.checked = false;
}
});
}
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>England</strong></li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Chelsea
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Mu
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Arsenal
</label>
</div>
</li>
</ul>
</div>
<div class="col-md-4">
<ul class="list-unstyled">
<li><strong>Spain</strong></li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Madrid
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Barcelona
</label>
</div>
</li>
<li>
<div class="checkbox">
<label>
<input type="checkbox"> Atletico
</label>
</div>
</li>
</ul>
</div>
I have the following html and I want to set the value of the second radio button in the list to be checked. I know I can do this using the id attribute but how can I do the same
by using the class selector as below and chaining the input field to be checked?
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
...
</ul>
$(".myOptionList li:nth-child(2)"); // how do i chain input field and set it as checked
Below code may help you.
HTML
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
jQuery
$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);
For versions of jQuery prior to 1.6, use:
$(".myOptionList li:nth-child(2)").find('input:radio').attr('checked', 'checked');
$(document).ready(function(){
$(".radio1 li:nth-child(4)").find('input:radio').prop('checked',true);
$(".radio2 li:nth-child(2)").find('input:radio').prop('checked',true);
$(".radio li:nth-child(1)").find('input:radio').prop('checked',true);
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
Fourth child selected:
<ul class="radio1">
<li>
<input id="1" type="radio" value="1" name="option1">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option1">
<label >two</label>
</li>
<li>
<input id="3" type="radio" value="3" name="option1">
<label >three</label>
</li>
<li>
<input id="4" type="radio" value="4" name="option1">
<label >four</label>
</li>
</ul>
Second child selected:
<ul class="radio2">
<li>
<input id="1" type="radio" value="1" name="option2">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option2">
<label >two</label>
</li>
<li>
<input id="3" type="radio" value="3" name="option2">
<label >three</label>
</li>
<li>
<input id="4" type="radio" value="4" name="option2">
<label >four</label>
</li>
</ul>
First child selected:
<ul class="radio">
<li>
<input id="1" type="radio" value="1" name="option">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option">
<label >two</label>
</li>
</ul>
First child selected:(same class name)
<ul class="radio">
<li>
<input id="1" type="radio" value="1" name="option4">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="option4">
<label >two</label>
</li>
</ul>
</body>
</html>
Even the use of:
$(".myOptionList li:nth-child(2)").find('input:radio').prop('checked',true);
Works apparently, it is just for a case.
It set the checked on all the radio until the last one, that it is set just because it is the last.
A more meaning solution would be to use the .last() to go directly on the radio option you want to set:
$(function(){
// Set the last checked radio
$('.myOptionList li > input[name="options"]').last().prop('checked', true)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="myOptionList">
<li>
<input id="1" type="radio" value="1" checked name="options">
<label >one</label>
</li>
<li>
<input id="2" type="radio" value="2" name="options">
<label >two</label>
</li>
...
</ul>
To ensure it's working properly I set the first radio checked.
But I suggest to change your code in a way that you select the radio on the value attribute.
The benefit of this is that your code will be more clear and easy to understand and change, and more if the order of radios change it will still works.
i need to add the total number of check box checked count value in element.
But when i checked the check box in "heading 2" part , the count value was added in "heading 1" part .
I did not find the issue any one please guide me resolve this issue
DEMO
HTMl:
<div id="main">
<div class="a">
<div class="row">
<div class="col-md-12 cb_select_head">
<a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
"glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
<span class="count-checked-checkboxes">0</span></span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in" id="function-collapse">
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c1" name="cc" type="checkbox">
<label for="c1">asdas</label>
</li>
<li class="noArrow">
<input id="c2" name="cc" type="checkbox">
<label for="c2">asdasd</label>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c3" name="cc" type="checkbox">
<label for="c3">asdasd
</label>
<ul>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
</ul>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c4" name="cc" type="checkbox">
<label for="c4">asdasd</label>
</li>
<li class="noArrow">
<input id="c5" name="cc" type="checkbox">
<label for="c5">five</label>
</li>
</ul>
</div>
</div>
<!--First List End-->
<!--Second list start -->
<div class="a">
<div class="row">
<div class="col-md-12 cb_select_head">
<a data-parent="#accordion" data-toggle="collapse" href="#function-collapse"><span class=
"glyphicon ecm-caret-down"></span></a><span class="labelBlock labelCounter">
<span class="count-checked-checkboxes">0</span></span>
<span class="fb_options_head">heading 2</span>
</div>
<ul class="sidebar fb-list-option collapse in" id="function-collapse">
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c1" name="cc" type="checkbox">
<label for="c1">asdas</label>
</li>
<li class="noArrow">
<input id="c2" name="cc" type="checkbox">
<label for="c2">asdasd</label>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c3" name="cc" type="checkbox">
<label for="c3">asdasd
</label>
<ul>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asd 1</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">sadas 2</label></li>
<li><input id="c1" name="cc" type="checkbox"><label for="c1">asdas 3</label></li>
</ul>
</li>
<li><span class="glyphicon ecm-caret-right"></span>
<input id="c4" name="cc" type="checkbox">
<label for="c4">asdasd</label>
</li>
<li class="noArrow">
<input id="c5" name="cc" type="checkbox">
<label for="c5">five</label>
</li>
</ul>
</div>
</div>
</div>
JS:
$(document).ready(function() {
var $checkboxes = $(
'#main ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('.count-checked-checkboxes').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes').val(
countCheckedCheckboxes);
});
});
see the working solution. Remember IDs needs to be unique, and avoid use of IDs whenever possible like putting input element inside the label instead of using with Id
$(document).ready(function() {
var $checkboxes1 = $('#head1 ul input[type="checkbox"]');
var $checkboxes2 = $('#head2 ul input[type="checkbox"]');
$checkboxes1.change(function() {
var countCheckedCheckboxes = $checkboxes1.filter(':checked').length;
$('#head1 .count-checked-checkboxes').text(countCheckedCheckboxes);
});
$checkboxes2.change(function() {
var countCheckedCheckboxes = $checkboxes2.filter(':checked').length;
$('#head2 .count-checked-checkboxes').text(countCheckedCheckboxes);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
<div id="head1">
<div class="row">
<div class="col-md-12 cb_select_head">
<span class="count-checked-checkboxes">0</span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in">
<li>
<label>
<input name="cc" type="checkbox">One
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">Two
</label>
</li>
<li>
<ul>
<li>
<label>
<input name="cc" type="checkbox">3 - a
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">3 -b
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">2 - c
</label>
</li>
</ul>
</li>
<li>
<label>
<input name="cc" type="checkbox">four
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">five
</label>
</li>
</ul>
</div>
</div>
<!--First List End-->
<!--Second list start -->
<div class="a" id="head2">
<div class="row">
<div class="col-md-12 cb_select_head">
<span class="count-checked-checkboxes">0</span>
<span class="fb_options_head">heading 1</span>
</div>
<ul class="sidebar fb-list-option collapse in">
<li>
<label>
<input name="cc" type="checkbox">One
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">Two
</label>
</li>
<li>
<ul>
<li>
<label>
<input name="cc" type="checkbox">3 - a
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">3 - b
</label>
</li>
<li>
<label>
<input name="cc" type="checkbox">2 - c
</label>
</li>
</ul>
</li>
<li>
<label>
<input name="cc" type="checkbox">four
</label>
</li>
<li class="noArrow">
<label>
<input name="cc" type="checkbox">five
</label>
</li>
</ul>
</div>
</div>
</div>
See if this works.
Ignoring everything others have mentioned, about ID's needing to be unique and what not, I was able to tally checked boxes for each heading using DOM traversal.
I changed the jQuery to:
$(document).ready(function() {
$('.a').each(function(){
var $checkboxes = $(this).find('input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(':checked').length;
$(this).closest('.a').find('.count-checked-checkboxes').text(
countCheckedCheckboxes);
});
});
});
Loop through each element '.a'
Use $(this).find('input[type="checkbox"]'); to get just the relevant checkboxes
On change, traverse up the DOM until you find '.a', from there you can traverse down and find the heading class '.count-checked-checkboxes'
There's probably a better way to do this though.
.closest() starts at the current element and travels upwards looking for a match.
.find() travels downwards through descendants.
Couple things.
j08691 is right, IDs must be unique. The browser is getting the first #count-checked-checkboxes and filling that value.
Also, you are getting the count for all checkboxes which is going to tally all checkboxes regardless of which div they are in
I would suggest the following:
$(document).ready(function() {
var $checkboxes = $(
'.a ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('#count-checked-checkboxes-a').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes-a').val(
countCheckedCheckboxes);
});
});
But you are still getting all checkboxes. At which point I would change your second <div class="a"> to <div class="b"> and then duplicate the above statement like so:
$(document).ready(function() {
var $checkboxes = $(
'.b ul input[type="checkbox"]');
$checkboxes.change(function() {
var countCheckedCheckboxes = $checkboxes.filter(
':checked').length;
$('#count-checked-checkboxes-b').text(
countCheckedCheckboxes);
$('#edit-count-checked-checkboxes-b').val(
countCheckedCheckboxes);
});
});
And of course change your IDs to match the ones in the jquery.
https://jsfiddle.net/gqcgwjq2/28/
I have this code like survey form with radio buttons and checkboxes. I try to fill in this form with all options, but the form mailto action doesn't perform if I select more than 12 radio & check boxes (total) in the entire page.
It takes all input as plain text and it operates if I select less than 12 radio buttons and checkboxes. I need the user to allow maximum selection and then send the data via mail. I don't know JavaAPIMail servlet so trying via form action mailto.
<section>
<form action="MAILTO:someone#example.com" method="post" enctype="text/plain">
<div class="title1">
<ol class="list-group">
<li class="list-group-item"> heading 1 :
<div>
<label class="radio-inline"><input type="radio" name="1" value="J">j</label>
<label class="radio-inline"><input type="radio" name="1" value="K">K</label>
<label class="radio-inline"><input type="radio" name="1" value="L">L</label>
<label class="radio-inline"><input type="radio" name="1" value="M">M</label>
<label class="radio-inline"><input type="radio" name="1" value="N">N</label>
<label class="radio-inline"><input type="radio" name="1" value="O">O</label>
</div>
</li>
<li class="list-group-item"> Heading 2 :
<div class="form-row">
<textarea name ="Head2:" placeholder ="Type Here" id ="H"></textarea>
</div>
</li>
<li class="list-group-item"> Heading 3 : (you can select more than one option)
<div>
<label class="checkbox-inline"><input type="checkbox" name="A:" class="ipad CCBOX" value="ipad">iPad</label>
<label class="checkbox-inline"><input type="checkbox" name="A:" class="web CCBOX" value="web">Web</label>
<label class="checkbox-inline"><input type="checkbox" name="A:" class="other CCBOX" value="other">other</label>
</div>
</li>
<li class="list-group-item"> Heading 4:
<div>
<label class="radio-inline"><input type="radio" name="B" value="Daily">Daily</label>
<label class="radio-inline"><input type="radio" name="B" value="Weekly">Weekly</label>
<label class="radio-inline"><input type="radio" name="B" value="Biweekly">Biweekly</label>
<label class="radio-inline"><input type="radio" name="B" value="Monthly">Monthly</label>
</div>
</li>
</ol>
<span id="web"><h3><b>Web</b></h3>
<ol class="list-group" >
<li class="list-group-item"> Heading 6:
<div>
<label class="radio-inline"><input type="radio" name="C" value="Easy">Easy</label>
<label class="radio-inline"><input type="radio" name="C" value="Neither easy nor difficult">Neither easy nor difficult</label>
<label class="radio-inline"><input type="radio" name="C" value="Difficult">Difficult</label>
</div>
</li>
<li class="list-group-item"> Heading 7:
<div class="form-row">
<textarea name = "Q :" placeholder = "Type Here" id = "comment-good" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 8:
<div class="form-row">
<textarea name = "W" placeholder = "Type Here" id = "comment-lack" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 9
<div class="form-row">
<textarea name = "E" placeholder = "Suggestions" id = "comment-sugg"></textarea>
</div>
</li>
</ol></span>
<span id="ipad"><h3><b>ipad</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 9
<div>
<label class="radio-inline"><input type="radio" name="R" value="ipad Easy">Easy</label>
<label class="radio-inline"><input type="radio" name="R" value="ipad Neither easy nor difficult">Neither easy nor difficult </label>
<label class="radio-inline"><input type="radio" name="R" value="ipad Difficult">Difficult</label>
</div>
</li>
<li class="list-group-item"> Heading 10
<div class="form-row">
<textarea name = "T" placeholder = "Type Here" id = "comment-goodipad"></textarea>
</div>
</li>
<li class="list-group-item"> Heading 11
<div class="form-row">
<textarea name = "Y: " placeholder = "Type Here" id = "comment-lackipad" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 12
<div class="form-row">
<textarea name = "U " placeholder = "Suggestions" id = "comment-suggipad" ></textarea>
</div>
</li>
</ol></span>
<span id="other"><h3><b>Other</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 13
<div class="form-row">
<textarea name = "I" placeholder = "Type Here" id = "comment-asuse" ></textarea>
</div>
</li>
<li class="list-group-item"> O
<div>
<label class="radio-inline"><input type="radio" name="S" value="Easy">Easy</label>
<label class="radio-inline"><input type="radio" name="S" value="Neither Easy nor difficult">Neither Easy nor difficult</label>
<label class="radio-inline"><input type="radio" name="S" value="Difficult">Difficult</label>
</div>
</li>
<li class="list-group-item"> Heading 14 :
<div>
<label class="radio-inline"><input type="radio" name="Z" value="Yes">Yes</label>
<label class="radio-inline"><input type="radio" name="Z" class="csgo view" value="No">No</label>
</div>
</li>
<li class="list-group-item excel" > Heading 15
<div class="form-row">
<textarea name = "X" placeholder = "Type Here" id = "comment-lackasd" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 16:
<div class="form-row">
<textarea name = "V" placeholder = "Suggestions" id = "comment-suggasd" ></textarea>
</div>
</li>
</ol></span>
<h3><b>Scope</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 17
<div>
<label class="radio-inline"><input type="radio" name="F" value="Most of the times">Most of the times</label>
<label class="radio-inline"><input type="radio" name="F" value="Occasionally">Occasionally </label>
<label class="radio-inline"><input type="radio" name="F" value="Doesn't meet my requirements">
Doesn't meet my requirements</label>
</div>
</li>
<li class="list-group-item"> Heading 18:
<div>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="D">D</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="S">S</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="C">C</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="M">M</label>
<label class="checkbox-inline"><input type="checkbox" name="d :" value="R">R</label>
</div>
</li>
<li class="list-group-item"> Heading 19
<div class="form-row">
<textarea name = "hi:" placeholder = "Type Here" id = "comment-l" ></textarea>
</div>
</li>
<li class="list-group-item"> Heading 20
<div class="form-row">
<textarea name = "hi2:" placeholder = "Suggestions" id = "comment-s" ></textarea>
</div>
</li>
</ol>
<h3><b>Overall Experience</b></h3>
<ol class="list-group">
<li class="list-group-item"> Heading 21:
<div>
<label class="radio-inline"><input type="radio" name="H" value="Likely">Likely</label>
<label class="radio-inline"><input type="radio" name="H" value="Not-Sure">Not Sure</label>
<label class="radio-inline"><input type="radio" name="H" value="Unlikely">Unlikely</label>
</div>
</li>
<li class="list-group-item"> Heading 22:
<div>
<label class="radio-inline"><input type="radio" name="G" value="Satisfied">Satisfied</label>
<label class="radio-inline"><input type="radio" name="G" value="Neutral">Neutral</label>
<label class="radio-inline"><input type="radio" name="G" value="Dissatisfied">Dissatisfied</label>
</div>
</li>
<li class="list-group-item"> Heading 24:
<div>
<label class="radio-inline"><input type="radio" name="..." value="Size">Size</label>
<label class="radio-inline"><input type="radio" name="..." value="Competition">Competition</label>
<label class="radio-inline"><input type="radio" name="..." value="Mix of both">Mix of both</label>
</div>
</li>
<li class="list-group-item"> Please provide your overall satisfaction:
<input id="input-2c" class="rating" min="0" max="5" step="0.5" data-size="sm" name="rating" data-symbol="" data-glyphicon="false" data-rating-class="rating-fa">
</li>
</ol>
<!-- form submission -->
<div class="wrapper">
<input type="submit" value="Send" class="btn btn-primary">
</div>
</form>
</div>
</section>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$('.CCBOX').click(function () {
$('#other').hide();
$('#web').hide();
$('#ipad').hide();
if($(".ipad:checked").length === 1 ){
$('#ipad').show();
}
if($(".web:checked").length === 1 ){
$('#web').show();
}
if($(".other:checked").length === 1 ){
$('#other').show();
}
});
</script>
<script type="text/javascript">
$(function() {
$('input[name="Z"]').on('click', function() {
if ($(this).val() == 'No') {
$('.excel').show();
}
else {
$('.excel').hide();
}
});
});
</script>
</html>
The problem that I am facing is when I click send button with all options selected, the mailto doesn't function. But if I select few number of radio buttons and checkboxes (maximum 12) the mail function operates. Please help me with where i have to make changes.
When I check everything and submit, I get an email with this in the body:
1=O
Head2:=
A:=ipad
A:=web
A:=other
B=Monthly
C=Difficult
Q :=
W=
E=
R=ipad Difficult
T=
Y: =
U =
I=
S=Difficult
Z=No
X=
V=
F=Doesn't meet my requirements
d :=D
d :=S
d :=C
d :=M
d :=R
hi:=
hi2:=
H=Unlikely
G=Dissatisfied
...=Mix of both
rating=
So, clearly, it's working for me. That's why I think it's an os or mail client issue.
Here it is with ALL text areas and text fields using values:
1=O
Head2:=
A:=ipad
A:=web
A:=other
B=Monthly
C=Difficult
Q :=value of Q :
W=value of W
E=value of E
R=ipad Difficult
T=value of T
Y: =value of Y:
U =value of U
I=value of I
S=Difficult
Z=No
X=value of X
V=value of V
F=Doesn't meet my requirements
d :=D
d :=S
d :=C
d :=M
d :=R
hi:=value of hi:
hi2:=value of hi2:
H=Unlikely
G=Dissatisfied
...=Mix of both
rating=Satisfaction value
On clicking on the Populate Values button the div below the button should populate the values of the selected radio buttons of the preferred and home locations respectively
I want to do it unobtrusively without inline JavaScript
<div id="form_block">
<div class="home-location">
<ul>
<li>Home Location</li>
<li>
<input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
for="home-india">India</label></li>
<li>
<input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
for="home-usa">USA</label></li>
</ul>
</div>
<div class="prefer-location">
<ul>
<li>Preferred Location</li>
<li>
<input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
for="preferred-india">India</label></li>
<li>
<input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
for="preferred-usa">USA</label></li>
</ul>
</div>
<div class="result">
My Home Location is: <span class="home-location-result"></span>and my preferred
location is: <span class="home-location-result"></span>
</div>
<input type="submit" value="Populate Values" id="ss" class="submit" />
Modified your HTML. Provided an id attribute for your result spans
$(function(){
$("#ss").click(function(){
// Find all input elements with type radio which are descendants of element with id `form`
var filt = $("#form_block input:radio");
// Apply a filter to the above object with `name='home-location'` and checked and get the value
var homeVal = filt.filter("[name='home-location']:checked").val();
// same as above
var preferredVal = filt.filter("[name='home-preferred']:checked").val();
// Set the text of the element width id `home-location-result' with the computed value
$("#home-location-result").text(homeVal);
// same as above
$("#preferred-location-result").text(preferredVal);
return false;
});
});
See a working demo
use this it's works for me
<script>
function test()
{
var home= $('input:radio[name=home-location]:checked').val();
document.getElementById("h1").innerHTML=home;
var preferred= $('input:radio[name=home-preferred]:checked').val();
document.getElementById("h2").innerHTML=preferred;
return false;
}
</script>
<form onsubmit="return test();">
<div id="form_block">
<div class="home-location">
<ul>
<li>Home Location</li>
<li>
<input type="radio" name="home-location" value="india" class="radio" id="home-india" /><label
for="home-india">India</label></li>
<li>
<input type="radio" name="home-location" value="usa" class="radio" id="home-usa" /><label
for="home-usa">USA</label></li>
</ul>
</div>
<div class="prefer-location">
<ul>
<li>Preferred Location</li>
<li>
<input type="radio" name="home-preferred" value="india" class="radio" id="preferred-india" /><label
for="preferred-india">India</label></li>
<li>
<input type="radio" name="home-preferred" value="usa" class="radio" id="preferred-usa" /><label
for="preferred-usa">USA</label></li>
</ul>
</div>
<div class="result">
My Home Location is: <span class="home-location-result" id="h1"></span>and my preferred
location is: <span class="home-location-result" id='h2'></span>
</div>
<input type="submit" value="Populate Values" id="ss" class="submit" />
</form>