2016-07-10 51 views
0

Codes hereONCLICK功能不会与单选按钮工作

<form onclick="sa();"> 
<div id="rates"> 
<input type="radio" id="r1" name="rate" value="0"> X1 
<input type="radio" id="r2" name="rate" value="1"> X2 
<input type="radio" id="r3" name="rate" value="2"> X3 
</div> 
</form> 

当我点击任何单选按钮X1 X2 X3或,SA()应该被调用,其改变从3到2的极限(警报窗口用于测试用途。)然后,限制用于限制在下半部分中选中的复选框的数量。但是,当我点击按钮时,该功能不起作用;没有警报窗口弹出,我仍然可以选择3个盒子。

另一个问题,我想问:如果用户已经检查了一些盒子,但是然后他/她返回到X按钮并选择另一个盒子,我希望所有盒子都没有选中,并且他/她需要检查他们再次。这是什么代码?只需在onclick中添加取消选中功能?

+0

即只设置形式onclick事件 – Li357

+0

从onLoad更改您的JavaScript LOAD TYPE设置没有包裹在身体 – Musa

+1

http://stackoverflow.com/questions/5431351/inline-event-handler-not-working-in-jsfiddle/22039087 –

回答

0

的功能被一个负载处理程序内定义的,因此在一个 不同范围

Inline event handler not working in JSFiddle

limit = 3; 
 

 
function sa() { //var rates = document.getElementsByName('rate'); 
 
    limit = 2; 
 
    window.alert(limit); 
 
    //if (rates[1].checked) {limit=1;} 
 
    //else if (rates[2].checked) {limit=2;} 
 
    //else if (rates[3].checked) {limit=3;} 
 
    //else {limit=2;} 
 
} 
 
$('form').on('click', function(evt) { 
 
    sa(); 
 
}); 
 

 

 
$('input.single-checkbox').on('change', function(evt) { 
 
    if ($(this).siblings(':checked').length >= limit) { 
 
    this.checked = false; 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action=""> 
 
    <p><strong>No:</strong></p> 
 
    <input type="radio" name="no" value="0" checked> Unrestricted 
 
    <input type="radio" name="no" value=1> 1 
 
    <input type="radio" name="no" value=2> 2 
 
    <input type="radio" name="no" value=3> 3 
 
    <input type="radio" name="no" value=4> 4 or more 
 
</form> 
 

 
<form> 
 
    <div id="rates"> 
 
    <input type="radio" id="r1" name="rate" value="0"> X1 
 
    <input type="radio" id="r2" name="rate" value="1"> X2 
 
    <input type="radio" id="r3" name="rate" value="2"> X3 
 
    </div> 
 
</form> 
 

 
<div class="pricing-levels-3"> 
 
    <p><strong>Must include:</strong></p> 
 
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> A 
 
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> B 
 
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> C 
 
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> D 
 
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> E 
 
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> F 
 
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> G 
 
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> H 
 
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> I 
 
    <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike"> J 
 
</div>