Как я могу исправить этот JavaScript, если я хочу снять флажок? - PullRequest
0 голосов
/ 03 апреля 2012

У меня есть код JavaScript для настройки группы флажков. Однако результат не то, что я ищу. Там почти 90%.

Это код, который я объясню, что он делает ниже:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>checkboxes</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="Visual Basic .NET 7.1" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
<script language="javascript">
function SingleSelect(regex,current)
{
re = new RegExp(regex);

for(i = 0; i < document.forms[0].elements.length; i++) {

elm = document.forms[0].elements[i];

if (elm.id == 'class') {

elm.checked = false;

}
}

current.checked = true;

 }
/script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<br/>Class 1
<input type="checkbox" id="class" name="cat[]" value="class 1" checked    onclick="SingleSelect('chk',this);" />
<br/>Class 2<input type="checkbox" id="class" name="cat[]" value="class 2" onclick="SingleSelect('chk',this);" />
<br/>Class 3<input type="checkbox" id="class" name="cat[]" value="class 3" onclick="SingleSelect('chk',this);" />
<br/>Class 4<input type="checkbox" id="cat" name="cat[]" value="class 4"  />
<br/>Class 5<input type="checkbox" id="cat" name="cat[]" value="class 5"  />
<br/>Class 6<input type="checkbox" id="cat" name="cat[]" value="class 6"  />
<br/>Class 7<input type="checkbox" id="cat" name="cat[]" value="class 7"  />
</td>
</tr>
</table>
</form>
</body>
</HTML>

Этот код состоит из 7 флажков от класса 1 до класса 7. В настоящее время для класса 1, класса 2 и класса 3 он хотел бы разрешить пользователю выбирать только один. что я и хочу.

Для класса 4, класса 5, класса 6 и класса 7 это позволит пользователям выбрать несколько или один или оставить его.

Однако я хочу:

Для класса 1, класса 2 и класса 3 пользователям разрешено выбирать только 1 или не выбирать.

Из класса 4, класса 5, класса 6 и класса 7, я не против, если пользователи выбирают несколько или один или оставляют это. Но из 7 вариантов Пользователи должны по крайней мере выбрать 1 для отправки, иначе должно появиться сообщение об ошибке с просьбой что-то выбрать.

Может кто-нибудь помочь мне отредактировать код JavaScript? или сообщите мне, как разрешить снятие флажка для флажка класса 1, класса 2 и класса 3.

Большое спасибо заранее

Приветствия

Ответы [ 4 ]

2 голосов
/ 03 апреля 2012

Для класса 1,2,3 вы можете сделать это

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Untitled Page</title>
        <script type="text/javascript">
            function test(e) {

                if (e.checked) {
                    var get = e.id;

                    for (i = 0; i < document.forms[0].elements.length; i++) {
                        var getting = document.forms[0].elements[i];
                        getting.checked = false;

                    }
                    e.checked = true;

                    }


            }
        </script>
    </head>
    <body>
    <form id="Form1" method="get">
    <input type="checkbox" id="Checkbox1"  name="test[]" value="1" onclick="test(this)"/>
    <input type="checkbox" id="Checkbox2"  name="test[]" value="1" onclick="test(this)"/>
    <input type="checkbox" id="Checkbox3"  name="test[]" value="1" onclick="test(this)"/>

    </form>
    </body>
    </html>
1 голос
/ 03 апреля 2012

Этот javascript должен работать для вас:

<script language="javascript">
// fix form so that only one of the first three is clicked at a time.
// return false if form has no elements clicked.
function validateForm(clickedElement) {
 var myForm = document.forms[0]; // consider document.getElementById("Form1");
 var hasOneChecked = false;
 var clickedFirstThree = (myForm != clickedElement);
 var i;
 for(i = myForm.elements.length - 1; i >= 0 ; i--) {
  var elem = myForm.elements[i];
  if(i >= 3 && elem == clickedElement) {
   clickedFirstThree = false;
  }
  if(clickedFirstThree && i < 3) {
   if(elem != clickedElement) {
    elem.checked = false;
   }
  }
  if (elem.checked) {
   hasOneChecked = true;
  }
 }
 return hasOneChecked
}

// validate the form and alert the user if there is a problem
function SingleSelect(e) {
 var isValid = validateForm(e);
 if(!isValid) {
  alert("Please check at least one item.");
 }
 return isValid;
}
</script>

Но учтите, что вам нужно изменить ВСЕ ваши входные данные, чтобы они содержали

onclick="SingleSelect(this);"

С этим фрагментом кода я думаю, что другие ответы здесь дали вам много полезных советов о том, как вы можете улучшить остальную часть своей страницы. Некоторые вещи для рассмотрения:

  1. Каждый атрибут id должен быть уникальным
  2. Таблица, содержащая один фрагмент данных, довольно бесполезна
  3. Форматирование вашего кода облегчит чтение
  4. Не забудьте правильно закрыть все ваши теги (без пропущенных угловых скобок)
  5. Рассмотрите возможность добавления type="text/javascript" к тегу скрипта.
  6. Если вы хотите использовать самозакрывающиеся теги, такие как <br />
1 голос
/ 03 апреля 2012

Вы не должны использовать один и тот же идентификатор несколько раз.

0 голосов
/ 03 апреля 2012

Может быть, не тот ответ, который вы ищете, но не проще ли вместо этого разделить различные типы ввода?Затем можно выполнить проверку на стороне сервера (на стороне клиента или обоих), что выбран хотя бы один из параметров 1-7.

Используйте, например, переключатели для первых трех (Class1, Class2)и Class3).И просто используйте флажки для классов с 4 по 7.

<input type="radio" name="none" value="None" checked>No choice for 1-3<br>
<input type="radio" name="class1" value="class1">Class1<br/>
<input type="radio" name="class2" value="class2">Class2<br/>
<input type="radio" name="class3" value="class3">Class3<br/>

<input type="checkbox" name="class4" value="Class4">Class4<br/>
...
<input type="checkbox" name="class7" value="Class7">Class7<br/>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...